getElementById within iframe

Question

Q: I have an iframe calling page X, on page X is a div w/ id=test. The value of this test div is "bubbles". On the parent page I need to read the value of the div and store it as a javascript var.

Outcome: on the parent page have a document.write(iframedivvalue); output that will = whatever the value of the div inside the iframe.

Note:

• as of right now page X is on a different domain.
• I am NOT trying to set anything inside the iframe, just read a divs value.

Solution 1

You will still be blocked by the same-origin policy if the domains mismatch. Doesn't matter if you're just trying to grab a value.

Solution 2

As Alex says on the comment above, you will still be blocked by the JavaScript 'same-origin' policy.

If your iframe is on the same domain, then you could try this:

document.getElementById('iframe-id').contentDocument.getElementById('canvas');

Solution 3

Assuming the iFrame has an assigned ID:

var iframe_div = document.getElementById('iframeid').document.getElementById('mydiv');
var content = iframe_div.innerHTML;

I believe should work.

Comments

[scrappedcola]

window.frames[0].document.getElementById("test"); would work as well (assuming there is only one iframe.

[The Scrum Meister]

as of right now page X is on a different domain. The solution won't work

[Brad Christie]

@TheScrumMeister: I was un-aware that had relevance (I believe I've seen sites use iframes/frames to automate other sides using banners at the top and the original site below). But if what you're saying is accurate, nothing I can do will change that. But that is the correct way to access iFrame content you have access to.