使用JavaScript访问iframe和body标记中的元素

I'm writing a GreaseMonkey script that modifies an attribute of an element with a specific ID, but I'm having some problems accessing it due to a nontraditional HTML hierarchy. Here's the relevant HTML:

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

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

Where attribute is the attribute that I'm attempting to modify.

属性是我要修改的属性。

At first, not realizing I was working with an iframe and a nested body tag, I tried this:

起初，我并没有意识到我正在使用一个iframe和一个嵌套的body标记，我尝试了以下方法:

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

While this worked fine in Firefox, Chrome tells me that I can't set the attribute of null, suggesting that it cannot find any elements with the id bodyID. How can I modify this attribute in a cross-browser friendly fashion?

虽然这在Firefox中运行得很好，但Chrome告诉我我不能设置null属性，这表明它无法找到任何带有id bodyID的元素。如何以跨浏览器友好的方式修改这个属性?

2 个解决方案

#1

You first need to pull the document of the <iframe>:

首先需要提取的文档:&lt;/p&gt;

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

Live DEMO

现场演示

BTW, if you want to get the <body> node, you don't need to give id or something like that, simply:

顺便说一下，如果您想获得节点，您不需要提供id或类似的东西，只需:

document.body

In your case, it's the document of the <iframe>:

在您的例子中，它是的文档:&lt;/p&gt;

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

A lot simpler... Isn't it?

简单多了…不是吗?

#2

The best way, IMO, to do this is to listen for the load event fired by the iFrame, then look into the iFrame DOM as need. This guarantees that you'll have the iFrame DOM available when you need it and take a while shot.

在我看来，做到这一点的最好方法是监听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