访问内部IFRAME元素和身体标签使用JavaScript(Accessing Elements I

我正在写修改与一个特定的ID元素的属性的GreaseMonkey脚本，但我有由于非传统的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");

现场演示

顺便说一句，如果你想获得的<body>节点，你不需要给ID或类似的东西，简单地说：

document.body

在你的情况下，它的文档<iframe>

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

简单了很多...难道不是吗？

Answer 2:

最好的办法，国际海事组织，这样做是为了监听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'
});

文章来源: Accessing Elements Inside iframe and body Tags with JavaScript