使用 Javascript 或 jQuery 将元素写入子 iframe
[英]Write elements into a child iframe using Javascript or jQuery
问题描述
I have something like this:
我有这样的事情：
<!doctype html>
<html>
<body>
<iframe id="someFrame"></iframe>
</body>
</html>
And I would like to use jQuery to write elements such that the full equivalent HTML would be like this:我想使用 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>
Alternatively, any plain-old-Javascript would be fine.或者，任何普通的 Javascript 都可以。
Thanks.谢谢。
Edit : After a little more research, it seems I am looking for an IE-equivalent of the contentDocument property of an iframe.编辑：经过更多研究，似乎我正在寻找 iframe 的 contentDocument 属性的 IE 等效项。 "contentDocument" is a W3C standard which FF supports, but IE does not. “contentDocument”是 FF 支持的 W3C 标准，但 IE 不支持。 (surprise surprise) （惊喜惊喜）
5 个解决方案
解决方案1
95 已采纳 2009-06-15 20:37:34
You can do both, you just have to target differently:你可以两者都做，你只需要有不同的目标：
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
解决方案2
36 2009-06-15 20:52:00
After some research, and a corroborating answer from Mike, I've found this is a solution:经过一番研究，以及迈克的确凿回答，我发现这是一个解决方案：
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>");
解决方案3
10 2014-01-13 08:51:21
There are two reliable methods to access the document element inside an iframe :有两种可靠的方法可以访问iframe的document元素：
1. The window.frames property: 1. window.frames属性：
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
2. The contentDocument property: 2. contentDocument属性：
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
解决方案4
7 2009-06-15 20:04:32
I am going out on a limb here and suggest that the answers proposed so far are not possible.我在这里冒险并建议到目前为止提出的答案是不可能的。
If this iframe actually has a src="somepage.html" (which you ought to have indicated, and if not, what is the point of using iframe?), then I do not think Jquery can directly manipulate html across frames in all browsers.如果这个 iframe 实际上有一个 src="somepage.html"（你应该已经指出，如果没有，使用 iframe 有什么意义？），那么我认为 Jquery 不能直接在所有浏览器中跨帧操作 html . Based on my experience with this kind of thing, the containing page cannot directly call functions from or make any sort of Javascript contact with the iframe page.根据我对这种事情的经验，包含页面不能直接从 iframe 页面调用函数或与 iframe 页面进行任何类型的 Javascript 接触。
Your "somepage.html" (the page that loads in the iframe) needs to do two things:您的“somepage.html”（在 iframe 中加载的页面）需要做两件事：
- Pass some kind of object to the containing page that can be used as a bridge将某种对象传递给可以用作桥梁的包含页面
- Have a function to set the HTML as you desired具有根据需要设置 HTML 的功能
So for example, somepage.html might look like this:例如， 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>
and the containing page might look like this:包含页面可能如下所示：
<!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>
This may appear a bit convoluted but it can be adapted in a number of directions and should work in at least IE, FF, Chrome, and probably Safari and Opera...这可能看起来有点令人费解，但它可以在多个方向上进行调整，并且至少应该在 IE、FF、Chrome 以及可能的 Safari 和 Opera 中工作......
解决方案5
1 2014-04-14 13:42:28
I have found this to be cross-browser compatible... a little crossing of previous answers and a bit of trial & error of my own.我发现这是跨浏览器兼容的......以前答案的一点交叉和我自己的一些试验和错误。 :) :)
I'm using this for a download of a report, or, if an error (message) occurs, it's displayed in the iFrame.我正在使用它来下载报告，或者，如果发生错误（消息），它会显示在 iFrame 中。 Most of the users will probably have the iFrame hidden, I'm using it multi-functional.大多数用户可能会隐藏 iFrame，我正在使用它多功能。
The thing is I have to clear the contents of the iFrame every time I click the report download button - the user can change parameters and it happens there are no results which then is displayed in the iFrame as a message.问题是我每次单击报告下载按钮时都必须清除 iFrame 的内容 - 用户可以更改参数，但结果却没有结果，然后作为消息显示在 iFrame 中。 If there are results, the iFrame remains empty - because the code below has cleared it and the window.open(...) method generates a Content-Disposition: attachment;filename=... document.如果存在的结果，所述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');
I do not have a browser that supports contentDocument but I've coded it this way so I'm leaving it.我没有支持contentDocument的浏览器，但我已经这样编码了，所以我要离开它了。 Maybe someone has older browsers and can post compatibility confirmation/issues?也许有人拥有较旧的浏览器并且可以发布兼容性确认/问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.