CODEWITHSUNDEEP
javascripthtmldomiframecross-browser
Sonic42
Sonic42

Reputation: 689

Accessing Elements Inside iframe and body Tags with JavaScript

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?

Upvotes: 4

Views: 9160

Answers (2)

Gezim
Gezim

Reputation: 7318

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'
});

Upvotes: 1

gdoron
gdoron

Reputation: 150263

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?

Upvotes: 9

Related Questions