问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何获取iframe元素的innerHTML内容

社区维基
1
新手上路，请多包涵

您好，我正在尝试获取 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。但我正面临一个按钮为 null 的警报，但 iframe 中有按钮为什么我为该按钮获取 null？

原文由 mathlearner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlgoogle-chromeiframegoogle-chrome-extension
阅读 975
1 个回答
得票最新
社区维基
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);
};

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

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

原文由 Ian 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题