如何将元素附加到Shadowbox内的表单中

Question

我正在尝试将文本区域追加到Shadowbox中存在的小型表单中。 Shadowbox是通过按钮调用的：

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

调用Shadowbox的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>

如您所见，我还从名为Shadowbox的同一页面上获取了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>

阴影框中的窗体也可以正常工作。 请注意，我在form标记中有一个target =“ _ parent”。 我不确定这是正确的...我认为这会阻止我的Shadowbox正常关闭（对此需要帮助）。

我想做的是...在内容变量中加上标记，然后...

1）动态创建一个称为“ ta”的文本区域2）将内容放入ta 3）将ta附加到Shadowbox中的表单中4）提交表单

一切正常，除了追加。 我尝试使用Shadowbox选项onOpen和onClose进行此操作。 它失败。 可能是因为表单位于iframe中！

我也尝试过处理iframe，但无法使其正常工作。 我以为我可以使用以下方法使Shadowbox对象成为包含iframe的页面的子代：

window.parent.Shadowbox.open({})

但是我也无法正常工作。 我有点不尽如人意...非常感谢您的帮助:)

谢谢！

Answer 1

阴影框的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);

  }
}