4

我正在编写一个 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。如何以跨浏览器友好的方式修改此属性？

4

2 回答 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");

简单多了……不是吗？

于 2012-06-30T21:22:25.860 回答
1

IMO 最好的方法是监听loadiFrame 触发的事件，然后根据需要查看 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'
});
于 2012-06-30T21:41:12.430 回答