如何將一個元素附加到Shadowbox中的表單

Question

我試圖將一個textarea附加到一個存在於Shadowbox中的小表單。該太極拳是從一個按鈕叫：

<input type="button" value="Upload" onClick="uploadImageSB();"> 

調用太極拳中的JavaScript寫成如下：

<script type="text/javascript" src="../tribnet_2013/shadowbox-3.0.3/shadowbox.js"></script> 
    <script type="text/javascript"> 

     Shadowbox.init({ 

     }); 

     function uploadImageSB() { 

      // shadowbox for image upload 
      Shadowbox.open({ 
       content: 'http://mydomain.com/cgi-bin/photo.cgi', 
       player:  'iframe', 
       title:  'Image Upload', 
       height:  200, 
       width:  500, 
       options: { 
        onOpen: function() { 

         var ed = tinymce.activeEditor; 
         var content = ed.save(); 

         var ta = document.createElement('textarea'); 
         ta.textContent = content; 
         ta.name = 'editor'; 
         ta.value = ta.textContent; 

         var form = document.getElementById('photoForm'); 
         form.appendChild(ta); 
        } 
       } 
      }); 

     }; 

    </script> 

正如你所看到的，我也抓住我的TinyMCE的編輯器的內容調用Shadowbox的相同頁面（這部分工作正常）。

在太極拳的形式如下：

<form id="photoForm" enctype="multipart/form-data" name="photoForm" action="[% base_url %]/cgi-bin/photo.cgi" method="post" target="_parent"> 

    <table border="0" cellpadding="0" cellspacing="0"> 

     <tr><td colspan="4" style="height: 50px;"></td></tr> 

     <tr> 
      <td style="width: 25px;"></td> 
      <td style="width: 175px;"><label>Image Name:</label></td> 
      <td style="width: 275px;"><input type="text" name="image_name" size="20" maxlength="30"></td> 
      <td style="width: 25px;"></td> 
     </tr> 

     <tr><td colspan="4" style="height: 20px;"></td></tr> 

     <tr> 
      <td style="width: 25px;"></td> 
      <td style="width: 175px;"><label>Load Image:</label></td> 
      <td style="width: 275px;"><input type="file" name="image_file" size="20"></td> 
      <td style="width: 25px;"></td> 
     </tr> 

     <tr><td colspan="4" style="height: 20px;"></td></tr> 

     <tr> 
      <td style="width: 25px;"></td> 
      <td style="width: 175px;"><label>Press Button to Upload:</td> 
      <td style="width: 275px;"><input type="submit" value="Upload" name="upload"></td> 
      <td style="width: 25px;"></td> 
     </tr> 

     <tr><td colspan="4" style="height: 20px;"></td></tr> 

    </table> 

    <input type="hidden" name="function" value="photo_upload_process"> 

</form> 

在屏蔽盒的形式也工作正常。請注意，我在表單標記中有一個target =「_ parent」。我不確定這是否正確...我認爲這可以防止我的Shadowbox正常關閉（需要幫助）。

我希望做的是......走在標記我的內容變量，...

1）動態創建一個名爲textarea的「TA」 2）把內容轉換成TA 3 ）將ta附加到Shadowbox中的表格中4）提交表格

除了追加以外的所有東西都可以工作。我試圖用onbox和onClose的Shadowbox選項來做到這一點。它失敗。 可能因爲表單在iframe中！

我試圖處理iframe，但我無法讓它工作。我以爲我可以使太極拳對象，其中包含使用的iframe頁面的孩子：

window.parent.Shadowbox.open({}) 

但我不能得到這工作的。我有點出於我的深度...真的很感謝一些幫助:)

謝謝！

Answer 1

shadowbox的iframe ID是sb-player，所以您應該訪問iframe內容。

純JavaScript方法，

options: { 
    onFinish: function() { 
    var iframe = document.getElementById('sb-player'); 
    iframe.addEventListener("load", function() { 
     var ed = tinymce.activeEditor; // get editor instance 
     var content = ed.save(); // get the editor content 
     var ta = document.createElement('textarea'); 
     ta.textContent = content; 
     ta.name = 'editor'; 
     ta.value = ta.textContent; 
     var iframeContent = this.contentDocument || this.contentWindow.document; 
     var form = iframeContent.getElementById('photoForm'); 
     form.appendChild(ta); 
    },true); 

    } 
}