如何获取iframe元素的innerHTML内容

3mpgtkmj 于 2022-12-02 发布在其他

关注(0)|答案(3)|浏览(388)

嗨我正在尝试获取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中，为什么我得到这个按钮为空？

Html

来源：https://stackoverflow.com/questions/14824739/how-to-get-innerhtml-content-of-iframe-element

3条答案

按热度按时间

bwntbbo31#

要在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中不起作用，因为存在跨域问题，但这是您应该需要的。

赞(0）回复(0）举报 2022-12-02

khbbv19g2#

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

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

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

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

赞(0）回复(0）举报 2022-12-02

wpx232ag3#

你试过吗？

iframe.srcdoc="<HTML><a id='some_id'>old</a><script>function run(src){eval(src);}</script></HTML>";

然后呢

iframe.contentWindow.run("document.getElementById('some_id').innerHTML='new content';");

赞(0）回复(0）举报 2022-12-02

我来回答

如何获取iframe元素的innerHTML内容

3条答案

相关问题

热门标签

最新问答