jquery thinbox 参考问题

Question

完全重申我的问题：

问题：在 Mozilla firefox 3.6 和 4.0 中丢失对 iFrame 的引用

更多信息： - 在 Internet Explorer 8 64 位和 32 位版本中运行良好。

如何重现？在 Mozilla 中：打开编辑器手风琴菜单。单击“editor openen”链接，在编辑器中填写一些随机文本，然后单击“bestand opslaan”。填写名称并单击“保存”。编辑器的内容将以 HTML 格式下载。

在保存文件对话框之外单击或在指定按钮上单击以关闭保存文件对话框。再次单击“bestand opslaan”按钮并尝试将您的内容保存到文件中。你不会看到任何事情发生。

问题不在 IE8 中。尝试在那里打开它。

Firebug 在您第二次打开保存对话框时告诉我：

iFrame.document is null

示例链接：http://www.newsletter.c-tz.nl/

更多信息： - 从thickbox 切换到colorbox 来尝试解决这个问题，因为thickbox 已经很久不支持了。 - colorbox 给了我同样的问题，所以我不认为是这个。 - 尝试谷歌搜索 iframe 参考错误等，一无所获。 - 尝试将 iframe 代码放在由 colorbox 脚本调用的 div 之外，它会保留它的引用，但当我将它放回该 div 时不会。

感谢：JohnP 提出对此展开“搜寻”。

编辑：

我认为 saveFile.php 文件可能对 iframe 的父级造成了麻烦，但是在将其从 editor.php 脚本中的操作变量中删除后，在您再次打开对话框后，它仍然失败并出现相同的错误.

是否有人可以编写一个脚本，通过名称迭代 iframe，并在找到 rignt iframe 时将其引用到 var？我想试试，但不知道怎么做..

Answer 1

我无法解释为什么它第一次在 Firefox 中起作用，但在 Firefox 中用于获取 iframe 的函数与 IE 不同：How to get the body's content of an iframe in Javascript?。

因此，将您的 JavaScript 函数“saveToFile”替换为：

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');

    var iFrameTag =  document.getElementById('saveAs_Iframe');
    var iFrame;
    if ( iFrameTag.contentDocument ) 
    { // FF
        iFrame = iFrameTag.contentDocument;
    }
    else if ( iFrame.contentWindow ) 
    { // IE
        iFrame = iFrameTag.contentWindow.document;
    }

    var inframeEditorFileName = iFrame.getElementById('editor_filename');
    var inframeEditorContent = iFrame.getElementById('editor_textarea');

    editorFileName.value = saveAsFileName;
    inframeEditorFileName.value = saveAsFileName;
    inframeEditorContent.value = currentContent;

    iFrame.editor_self.submit();
}

我用 Firebug 替换了这个函数，它对我有用。

更新： 您还可以使用跨浏览器解决方案，更简单，感谢 jQuery：

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');
    editorFileName.value = saveAsFileName;

    $("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
    $("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
    $("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}