Question

我正在编写一个GreaseMonkey脚本，用于修改具有特定ID的元素的属性，但由于非传统的HTML层次结构，我在访问它时遇到了一些问题。这是相关的HTML：

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

attribute是我试图修改的属性。

首先，我没有意识到我正在使用iframe和嵌套body标记，我试过这个：

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

虽然这在Firefox中运行良好，但Chrome告诉我，我无法设置null的属性，这表明它找不到任何ID为bodyID的元素。如何以跨浏览器友好的方式修改此属性？

Answer 1

首先需要提取<iframe>：

的文档

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

Live DEMO

BTW，如果你想获得<body>节点，你不需要提供id或类似的东西，只需：

document.body

在您的情况下，它是<iframe>：

的文档

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

简单得多......不是吗？

Answer 2

IMO最好的方法是监听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'
});

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

2 个答案: