我正在编写一个 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的元素。如何以跨浏览器友好的方式修改此属性？
你首先需要拉取<iframe>的文档：
document.getElementById('iframeID').contentDocument
.getElementById('bodyID').setAttribute("attribute","value");
现场演示
顺便说一句，如果你想获取<body>节点，你不需要给出 id 或类似的东西，只需：
document.body
在您的情况下，它是<iframe>的文件：
document.getElementById('iframeID').contentDocument.body.setAttribute("attribute","value");
简单多了...不是吗？
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'
});