使用 Javascript 或 jQuery 将元素写入子 iframe
Posted
技术标签:
【中文标题】使用 Javascript 或 jQuery 将元素写入子 iframe【英文标题】：Write elements into a child iframe using Javascript or jQuery 【发布时间】：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 不支持。 （惊喜惊喜）
【问题讨论】：
【参考方案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>");
【讨论】：
有趣。你知道为什么要打开和关闭吗？ 这太棒了！谢谢杰夫！ 这是解决我在使用 codemirrorseditor.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 的浏览器，但我已经以这种方式对其进行了编码，所以我将离开它。也许有人使用较旧的浏览器并且可以发布兼容性确认/问题？
【讨论】：
以上是关于使用 Javascript 或 jQuery 将元素写入子 iframe的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 或 Jquery 使用文件系统或操作？
防止用户使用 jquery 或 javascript 重新加载页面 [重复]