使用Javascript或jQuery将元素写入子iframe
我有这样的东西：
<html> <body> <iframe id="someFrame"></iframe> </body> </html> 我想用jQuery来编写元素，使得完全等价的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会很好。
谢谢。
编辑 ：经过多一点研究，似乎我正在寻找一个IE浏览器相当于iframe的contentDocument属性。 “contentDocument”是FF支持的W3C标准，但IE不支持。 （惊喜）
你可以做两个，你只需要不同的目标：
var ifrm = document.getElementById('myIframe'); ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument; ifrm.document.open(); ifrm.document.write('Hello World!'); ifrm.document.close();
经过一番调查和Mike的确切回答，我发现这是一个解决scheme：
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>");
我正在这里发表意见，并build议迄今为止提出的答案是不可能的。
如果这个iframe实际上有一个src =“somepage.html”（你应该指出，如果没有，使用iframe有什么意义？），那么我不认为jquery可以直接在所有浏览器。 根据我对这种事情的经验，包含页面不能直接调用函数或者使任何types的Javascript与iframe页面联系。
你的“somepage.html”（在iframe中加载的页面）需要做两件事情：
- 将某种对象传递给可用作桥接的包含页面
- 有一个function来设置您所需的HTML
例如，somepage.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>
包含页面可能如下所示：
<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>
这可能看起来有点复杂，但它可以在很多方面进行调整，并应在至lessIE浏览器，FF，Chrome，可能还有Safari和Opera …
有两种可靠的方法来访问iframe的document元素：
1. window.frames属性：
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
演示
2. contentDocument属性：
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
演示
我发现这是跨浏览器兼容的…有点过去的答案和我自己的试验和错误的一点点。 🙂
我正在使用它来下载报告，或者如果发生错误（消息），它将显示在iFrame中。 大多数用户可能会隐藏iFrame，我正在使用它多function。
事情是我必须清除iFrame的内容，每次我点击报告下载button – 用户可以改变参数，它发生没有结果，然后显示在iFrame作为消息。 如果有结果，iFrame保持空白 – 因为下面的代码清除了它，而window.open(...)方法生成了Content-Disposition: attachment;filename=... document。
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的浏览器，但我已经这样编码，所以我要离开它。 也许有人有旧的浏览器，可以张贴兼容性确认/问题？
