Question

您好我正在尝试获取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中有按钮为什么我为此按钮获取空？

Answer 1

要获取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);
};

DEMO： http://jsfiddle.net/nqTnz/

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

Answer 2

在jQuery的源代码中，获取iframe文档的解决方案如下：

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

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

var elem;
if (iframeDocument) {
   elem = iframeDocument.getElementById('mybutton');
}

如何获取iframe元素的innerHTML内容

2 个答案: