使用 Javascript 或 jQuery 将元素写入子 iframe答案

【问题标题】：Write elements into a child iframe using Javascript or jQuery使用 Javascript 或 jQuery 将元素写入子 iframe
【发布时间】：2010-11-03 03:15:36
【问题描述】：

我有这样的事情：

<!doctype html>
<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

我想使用 jQuery 来编写元素，使得完整的等效 HTML 如下所示：

<!doctype html>
<html>
  <body>
    <iframe id="someFrame">
      <!-- inside the iframe's content -->
      <!-- <html><body>  -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <!-- </body></html> -->
    </iframe>
  </body>
</html>

或者，任何普通的旧Javascript都可以。

谢谢。

编辑：经过更多研究，我似乎正在寻找与 iframe 的 contentDocument 属性等效的 IE。 “contentDocument”是 FF 支持的 W3C 标准，但 IE 不支持。（惊喜惊喜）

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

两者都可以，只是目标不同：

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

【讨论】：

啊哈-contentWindow。我实际上发现打开和关闭是开始使用 jquery 所必需的......
此方法不再有效。我收到 js 错误，显示不安全的 JavaScript 尝试从具有 URL“URL2”的框架访问具有 URL“URL1”的框架。域、协议和端口必须匹配。下面给出的桥梁方法确实可以正常工作。
我知道这是一个旧线程，但在什么情况下你会有ifrm.contentDocument.document.document？
为什么不能直接写入 iframe 的主体，只能使用这个 hack？
没有 close() 语句，后面的所有 JS 都不会执行，因此使用 try finally 块是有意义的。谢谢。这个答案帮助我弄清楚我的页面出了什么问题

【解决方案2】：

经过一些研究，以及 Mike 的肯定回答，我发现这是一个解决方案：

  var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
  d.open(); d.close(); // must open and close document object to start using it!

  // now start doing normal jQuery:
  $("body", d).append("<div>A</div><div>B</div><div>C</div>");

【讨论】：

有趣。你知道为什么要打开和关闭吗？
这太棒了！谢谢杰夫！
这是解决我在使用 codemirrors editor.getValue()时遇到的问题的完美解决方案！

【解决方案3】：

有两种可靠的方法可以访问iframe 中的document 元素：

1. window.frames 属性：

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

Demo

2. contentDocument 属性：

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

Demo

【讨论】：

完美，JSFiddle 非常有帮助。谢谢！

【解决方案4】：

我在这里不顾一切，建议到目前为止提出的答案是不可能的。

如果这个 iframe 实际上有一个 src="somepage.html" （你应该指出，如果没有，使用 iframe 有什么意义？），那么我认为 Jquery 不能直接跨帧操作 html在所有浏览器中。根据我对这类事情的经验，包含页面不能直接从 iframe 页面调用函数或与 iframe 页面进行任何类型的 Javascript 联系。

您的“somepage.html”（在 iframe 中加载的页面）需要做两件事：

将某种对象传递给可用作桥梁的包含页面
具有根据需要设置 HTML 的功能

例如，somepage.html 可能如下所示：

<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
    var bridge={
        setHtml:function(htm) {
            document.body.innerHTML=htm;
        }
    }

    $(function() { parent.setBridge(bridge); });

//--></script>
</head>
<body></body>
</html>

包含页面可能如下所示：

<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
    bridge=br;
    bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
    }
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>

这可能看起来有点令人费解，但它可以在多个方向上进行调整，并且至少可以在 IE、FF、Chrome 以及可能的 Safari 和 Opera 中运行...

【讨论】：

感谢您的回答 - 但我想使用这个 iframe 来像富文本编辑器一样编写 HTML。我没有设置 src 属性，因为它将被清除并从“顶部”窗口重新组合。另外 - 我认为必须有可能接触到孩子的 DOM - 请参阅我在 OP 中的编辑。
有什么理由需要使用 iframe 而不是 div？似乎 div 会更容易并且不太可能跨越浏览器。
原来是有原因的。您需要放置外部 javascript，并且不希望它损坏您的页面。但是您还需要引用者来匹配您的顶级域。这是在页面上放置广告的最常用方法： + document.write('

【解决方案5】：

我发现这是跨浏览器兼容的......以前的答案有点交叉和我自己的一些试验和错误。 :)

我正在使用它来下载报告，或者，如果发生错误（消息），它会显示在 iFrame 中。大多数用户可能会隐藏 iFrame，我正在使用它的多功能性。

问题是我每次单击报告下载按钮时都必须清除 iFrame 的内容 - 用户可以更改参数，但碰巧没有结果，然后在 iFrame 中显示为一条消息。如果有个结果，iFrame 将保持为空 - 因为下面的代码已将其清除并且window.open(...) 方法会生成一个Content-Disposition: attachment;filename=... 文档。

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

我没有支持contentDocument 的浏览器，但我已经以这种方式对其进行了编码，所以我将离开它。也许有人使用较旧的浏览器并且可以发布兼容性确认/问题？

【讨论】：