如何将元素附加到Shadowbox中的窗体中

How do I append an element to a form inside a Shadowbox

本文关键字：Shadowbox 窗体 元素      更新时间：2023-09-26

我试图将一个文本区域附加到一个存在于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)将内容放入ta3)将其附加到Shadowbox中的表单中4)提交表单

除了追加符，其他都可以。我尝试使用Shadowbox选项onOpen和onClose来做到这一点。它失败。可能是因为表单在iframe中!

我也试过处理iframe，但是我不能让它工作。我想我可以使Shadowbox对象成为包含iframe的页面的子对象，使用:

window.parent.Shadowbox.open({})

但是我也不能让它工作。我有点力不从心……我真的很感激你的帮助:)

谢谢!

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);
  }
}
相关文章：