<Iframe> JavaScript Access Parent Dom Across Domains

iframe javascript access parent DOM across domains?

Hate to say it but I'm like 99% sure that ain't happening directly because of security.

You can try it out here.

bhh

How is it possible for an iframe to access its parents DOM?

If the content of the iframe and its parent have the same domain, you can access the parent pages DOM from the iframe by using parent.document.getElement....

However you can't do this cross-domain (not even across different subdomains) as it will result in:

Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.

Access parent window from iframe (cross-domain)

If I were you I would check out window.postMessage. It may do what you want:

For reference see the following:

  • MDN - Window.postMessage
  • https://stackoverflow.com/a/3076648/296889 - see the Window.postMessage section

Cross-domain IFrame DOM properties access from parent's JavaScript

I cant even tell you how many times I've ran into problems like this.

Read this community wiki on circumventing the same-origin policy to find a solution that works for you. Its one of the best same-origin resources I've found on the internet.

Alex Sexton of yayQuery also put together a screencast on some different methods

How to access parent dom element from child iframe?

Is it possible? Yes. But only if you have permission to do so. Do you control both domains? If not then, no, this is not possible due to cross domain security restrictions.

Assuming you do have control over both sites you could use window.postMessage to facilitate this communication.

See this

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.

Get DOM content of cross-domain iframe

You can't. XSS protection. Cross site contents can not be read by javascript. No major browser will allow you that. I'm sorry, but this is a design flaw, you should drop the idea.

EDIT

Note that if you have editing access to the website loaded into the iframe, you can use postMessage (also see the browser compatibility)

Cross-domain JavaScript iFrame-parent access blocked

After doing lots of searching around, I came across this:

http://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro

I actually tested the method (using my own short piece of code) and it seemed to work on Chrome, Firefox and IE. Now I'm gonna try the "real" implementation...

Javascript communicating cross-domain to parent window of iframe

postMessage is probably what you're looking for. Mozilla has documented this and it has fairly decent cross browser support:

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

I also wrote a library around this concept, it may need a little debugging but it is available on github: https://github.com/tsharp/OF.Core.js/blob/master/js/of/window.messaging.js

From here you'll need an event listener on the parent window to handle all incoming requests ... which will remove the iframe from the parent context. Here is an example of registering the message received event.

function registerWindowHandler() {
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', receiveMessage, false);
} else {
// Support for ie8
window.attachEvent('onmessage', receiveMessage);
}
}


Related Topics



Leave a reply



Submit