Javascript 如何获取iframe元素的innerHTML内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14824739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get innerHTML content of iframe element
提问by Ritesh Mehandiratta
hi i am trying to get inner HTML of iframe element
嗨，我正在尝试获取 iframe 元素的内部 HTML
my html document a structure is like this
我的 html 文档结构是这样的
<body>
<div>
<iframe id="frame1">
<html>
<button id="mybutton">click me</button>
</html>
</iframe>
</div>
</body>
i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script
我正在创建一个 chrome 扩展我必须在单击带有 id mybutton 的按钮时显示警报我编写了一个内容脚本
var greeting = "hola, ";
document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ;
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
var button = iframeDocument.getElementById("mybutton") ;
if(button ==null)
alert("button is null") ;
i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it. but i am facing an alert which has button is null but there is button in iframe why i am getting null for this button??
当我访问一个页面时，我在 chrome 中安装了这个扩展，然后文档正文被更改为一个带有按钮的 iframe。但我正面临一个按钮为空的警报，但 iframe 中有按钮，为什么我的这个按钮为空？？
回答by Ian
To get the button inside of the iframe, this could work:
要获取 iframe 内的按钮，这可以工作：
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
Obviously, you can navigate to get what you want with iframeDocument, and use .innerHTMLas you seem to know. You cannot get the contents of the iframe if the iframe is pointing to a domain other than its parent.
显然，您可以使用 导航以获取您想要的内容iframeDocument，并.innerHTML按照您似乎知道的方式使用。如果 iframe 指向的域不是其父域，则您无法获取 iframe 的内容。
UPDATE:
更新：
You need to use the code to get the frame's document and its contents afterit's ready, so you should use something like this:
您需要使用代码在准备好后获取框架的文档及其内容，因此您应该使用以下内容：
window.onload = function () {
var greeting = "hola, ";
var div1 = document.createElement("div");
var frame1 = document.createElement("iframe");
frame1.id = "frame1";
frame1.onload = function () {
alert("loaded");
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
if (button == null) {
alert("button is null");
}
};
frame1.src = "http://onemoredemo.appspot.com";
div1.appendChild(frame1);
document.body.appendChild(div1);
};
DEMO:http://jsfiddle.net/nqTnz/
演示：http : //jsfiddle.net/nqTnz/
The important thing is how the elements are created and appended to the DOM - not just using innerHTML. The onloadmethod of the iframe is to guarantee it's ready. The actual manipulation code won't work in the jsFiddle because the cross-domain problems, but is what you should need.
重要的是如何创建元素并将其附加到 DOM - 而不仅仅是使用innerHTML. onloadiframe的方法是保证它准备好了。由于跨域问题，实际操作代码在 jsFiddle 中不起作用，但这是您应该需要的。
回答by Bhushan Firake
In jQuery's source code the solution to get the iframe document is like this:
在jQuery的源代码中，获取iframe文档的解决方案是这样的：
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And then you can usually use getElementsByTagNameor getElementByIdto select the DOM-Elements:
然后你通常可以使用getElementsByTagName或getElementById来选择DOM元素：
var elem;
if (iframeDocument) {
elem = iframeDocument.getElementById('mybutton');
}
