Can JavaScript Access Iframe Elements from the Parent Page

Can javascript access iframe elements from the parent page?

It should not be able to if the pages are from different domains, the browsers security sandbox should prevent this type of access. It might work when the two pages are from different sub domains of the same domain, but that can and will differ between browsers (and possibly even versions of the same browser).

Accessing the child iframe might work, but the other way around will most certainly not work.

Access elements of parent window from iframe

I think the problem may be that you are not finding your element because of the "#" in your call to get it:

window.parent.document.getElementById('#target'); 

You only need the # if you are using jquery. Here it should be:

window.parent.document.getElementById('target'); 

Access iframe elements in JavaScript

If your iframe is in the same domain as your parent page you can access the elements using window.frames collection.

// replace myIFrame with your iFrame id
// replace myIFrameElemId with your iFrame's element id
// you can work on window.frames['myIFrame'].document like you are working on
// normal document object in JS
window.frames['myIFrame'].document.getElementById('myIFrameElemId')

If your iframe is not in the same domain the browser should prevent such access for security reasons.

Access parent URL from iframe

You're correct. Subdomains are still considered separate domains when using iframes. It's possible to pass messages using postMessage(...), but other JS APIs are intentionally made inaccessible.

It's also still possible to get the URL depending on the context. See other answers for more details.

Invoking JavaScript code in an iframe from the parent page

Assume your iFrame's id is "targetFrame" and the function you want to call is targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

You can also access the frame using window.frames instead of document.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

How can we access child Iframe from parent

You can't. The contents of an iframe cannot be accessed if the parent and child are served from different domains. If they could, it would be possible to wrap any 3rd party page and capture passwords etc from it.

The only way to communicate cross-domain requires you to have control of the iframe contents. If you can add a script then you can use postMessage to send events etc in both directions.

Don't let the parent website, get info from my iFrame

http://javascript.info/tutorial/same-origin-security-policy

Because of Same Origin policy in Javascript, from javascript is impossible to have access to an iFrame if both (parent and iFrame) are located in different domains.

"So, iframe.contentWindow.document will be the inner document.
You can access it or modify from parent window if both iframe and the parent come from one domain/host/port (security limitations are discussed more in detail in the next sections)."
Text From: http://javascript.info/tutorial/frames-and-iframes

---

Related Topics