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
How to Reload or Re-Render the Entire Page Using Angularjs
JavaScript - Difference Between Array and Array-Like Object
Differencebetween Typeof and Instanceof and When Should One Be Used VS. the Other
(Deep) Copying an Array Using Jquery
Selecting an Element in Iframe with Jquery
Angularjs Multiple Filter with Custom Filter Function
Remove All Special Characters Except Space from a String Using JavaScript
Javascript: Clear All Timeouts
How to Store a JavaScript Function in JSON
How to Check Whether an Object Is a Date
How to Create a Web Worker from a String
How to Remove a Key from a JavaScript Object
Retrieving Binary File Content Using JavaScript, Base64 Encode It and Reverse-Decode It Using Python
Jquery - Get Text for Element Without Children Text