37

I have a file: 1.html and an iframe inside it.
I want to access an element (lets say myelement) which exists in 1.html (outside of iframe) from the iframe.
How can I do that?
I tried: 

top.getElementById("myelement")
top.document.getElementById("myelement")  
parent.getElementById("myelement")
parent.document.getElementById("myelement")

but it didn't work!!

Salman A
  • 262,204
  • 82
  • 430
  • 521
user646093
  • 1,495
  • 3
  • 15
  • 20
  • possible duplicate of [iframe accessing parent DOM?](http://stackoverflow.com/questions/2620755/iframe-accessing-parent-dom) – lulalala Aug 20 '15 at 03:30

4 Answers4

63

Communication between an iframe and parent document is not possible for cross-origin resources. It will only work if the iframe and the containing page are from the same host, port and protocol - e.g. http://example.com:80/1.html and http://example.com:80/2.html

For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.

Edit - assuming both resources are from the same origin

In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById

robsch
  • 9,358
  • 9
  • 63
  • 104
Gary Chambers
  • 24,930
  • 4
  • 35
  • 31
  • parent.document.getElementById does work !!!. Maybe i overlooked this one... I had to communicate between the original document(jsp) and iframe(also jsp).. Was very complex involving session bean... Lost it somewhere.. Thanks again. – user646093 Apr 09 '11 at 15:51
  • Something I found relevant to this, if you using the parent.myfunction() to call a function on the parent page you still need to do this to get to those elements. least I did using Firefox. – Kit Ramos Jul 24 '17 at 19:50
  • 2
    `parent.document.getElementById` does work fine...Thank you – Swap-IOS-Android Feb 08 '18 at 13:47
  • You can use querySelector inside document from window.parent too window.parent.document.querySelector("SELECTOR"); – Eday Gonzalez Jul 11 '21 at 15:52
  • Hours of pain, this is what i need `parent.document.getElementById`. thank you... – Johan Oct 26 '22 at 02:35
19

Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.

Demo here, source of outer frame here, source of iframe here.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • 1
    it's blocked. `Uncaught DOMException: Blocked a frame with origin "http://fiddle.jshell.net" from accessing a cross-origin frame. at http://fiddle.jshell.net/salman/tye5R/show/light/:39:12` – shingom Dec 05 '20 at 00:13
  • @shingom This method does work in practice. I believe there is an error on the jsfiddle because of the way that site handles the iframe. – swinn Jun 08 '21 at 12:41
-2

parent.document Not working

For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.

ASANIAN
  • 372
  • 2
  • 8
-8

Communication between an iframe and parent document is not possible for cross-origin resources

that is in so many ways wrong, i dont even WANT to know where to begin. Of course cross-domain requests and algorith-exchanges have a long history, it is both well documented and working now, one might start JSON-request or even simple XMLHttp-Requests via JQuery, for example, you can even load whole .js-files AND inject them into your code - injecting code in remote sources will of course need an appropriate interface; one may achieve such a thing via communication with the responsible persons, just ask them nicely and maybe they'll cooperate if your project makes sense and has its use.

To answer the question : accessing whole documents would raise the need for transferring it beforehand - i would recommend XML for that purpose because the DOM-tree and XML are nearly interchangeable. Load the tree via .get (.ajax for remote hosts), append it to this and access it just like you want ... sounds easy and if you got some experience it IS easy. If you ever read "cross-domain" and "not possible" in the same sentence again you might as well ignore the poster - there are many people out there who dont know what they're talking about ;-)

nope
  • 181
  • 3
  • 8
    What you're talking about is basically client side html scraping. It doesn't sound like that is what OP wants to do. And in terms of "cross-domain" and "not possible"...people have gone through a LOT of trouble to stop iframes from accessing windows from other domains. I don't think you understood the question very well. – Ryan O'Neill Aug 16 '12 at 20:47