logo标签列表

使用JavaScript访问iframe和body标签内的元素

javascripthtmldomiframecross-browser
4

我正在编写一个GreaseMonkey脚本，用于修改具有特定ID的元素的属性，但由于非传统的HTML层次结构，我无法访问它。以下是相关的HTML：

<body>
...
    <iframe id="iframeID">
        <html>
        ...
            <body id="bodyID" attribute="value">
            ...
            </body>
        ...
        </html>
    </iframe>
...
</body>

这里的 attribute 是我试图修改的属性。

一开始，我没有意识到我正在处理一个嵌套了 body 标签的 iframe，所以我尝试了以下代码：

document.getElementById('bodyID').setAttribute("attribute","value")

在Firefox中这很好用，但是Chrome告诉我无法设置null的属性，并暗示它找不到任何id为bodyID的元素。如何以跨浏览器友好的方式修改此属性？
你尝试过使用window.frames吗？（文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/frames） - Jeremy Rodi
@drderp 我认为这个方法可以行得通，但与gdoron的解决方案相比，代码会包含不必要的混乱。 - Sonic42
2
gdoron在我发帖后立即发布了他的解决方案；我同意你的观点。 - Jeremy Rodi
请查看我的关于<body>和演示的更新。 - gdoron
2个回答
9

您首先需要获取<iframe>的文档：

document.getElementById('iframeID').contentDocument
.getElementById('bodyID').setAttribute("attribute","value");

实时演示

顺便说一下，如果您想获取<body>节点，您不需要提供id或类似的东西，只需：

document.body

在您的情况下，需要翻译的是<iframe>标签的文档内容：
document.getElementById('iframeID').contentDocument.body.setAttribute("attribute","value");

让事情变得简单了许多...是吧？
1
在我看来，最好的方法是监听 iFrame 触发的 load 事件，然后根据需要查看 iFrame DOM。这可以确保在需要时您将拥有 iFrame DOM 并且可以进行截屏。
$('#iframeID').on('load', function ()
{
  alert('loaded'); // iFrame successfully loaded
  var iFrameDoc = $('#iframeID')[0].contentDocument; // Get the iFrame document
  $('body', iFrameDoc).attr('attribute', 'new value'); // Get the 'body' in the iFrame document and set 'attribute' to 'new value'
});
1
jQuery 标签在哪里？请阅读我关于 <body> 的评论。 - gdoron
@gdoron，在你的<head>中添加jQuery。由于跨域策略，如果iFrame和iFrame容器具有不同的域，则此方法将无法正常工作。 - Gezim
不确定您对jQuery的意思是什么。而且您的回答也存在跨域策略的问题。 - gdoron
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接