Accessing Elements Inside iframe and body Tags wit

2019-01-25 20:07发布

站内问答 / JavaScript
1321 2 5

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:

<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:

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?

2条回答
Juvenile、少年°
2楼-- · 2019-01-25 20:53

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.

$('#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'
});
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-01-25 20:57

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

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:

document.body

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

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

A lot simpler... Isn't it?

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)