如何将元素附加到 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>

阴影框中的表单也可以正常工作。请注意，我在表单标签中有一个 target="_parent" 。我不确定这是否正确......我认为它会阻止我的 Shadowbox 正确关闭（需要帮助）。

我想做的是......在我的内容变量中获取标记并......

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

除了追加之外，一切都有效。我尝试使用 Shadowbox 选项 onOpen 和 onClose 来做到这一点。它失败。 可能是因为表单在 iframe 中！

我也尝试过处理 iframe，但我无法让它工作。我想我可以使用以下方法使 Shadowbox 对象成为包含 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);

  }
}