4

您好我正在尝试获取 iframe 元素的内部 HTML

我的html文档一个结构是这样的

<body>
    <div>
        <iframe id="frame1">
            <html>
                <button id="mybutton">click me</button>
            </html>
        </iframe>
    </div>
</body>

我正在创建一个 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") ;

当我访问一个页面时，我在 chrome 中安装了这个扩展，然后文档正文变成了一个带有按钮的 iframe。但我正面临一个按钮为空的警报，但 iframe 中有按钮，为什么我的这个按钮为空？

4

2 回答 2

8

要在 iframe 中获取按钮，这可以工作：

var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");

显然，您可以使用 导航以获取您想要的内容iframeDocument，并.innerHTML按照您似乎知道的方式使用。如果 iframe 指向的域不是其父域，则您无法获取 iframe 的内容。

更新：

准备好后，您需要使用代码来获取框架的文档及其内容，因此您应该使用以下内容：

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);
};

演示：http: //jsfiddle.net/nqTnz/

重要的是如何创建元素并将其附加到 DOM - 而不仅仅是使用innerHTML. iframe的onload方法是保证它已经准备好。由于跨域问题，实际操作代码在 jsFiddle 中不起作用，但这是您应该需要的。

于 2013-02-12T03:08:01.120 回答
0

在 jQuery 的源代码中，获取 iframe 文档的解决方案是这样的：

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

然后您通常可以使用getElementsByTagName或getElementById选择 DOM 元素：

var elem;
if (iframeDocument) {
   elem = iframeDocument.getElementById('mybutton');
}
于 2013-02-12T03:20:53.210 回答