How to pick element inside iframe using document getElementById

Question

I have a iframe like this   lt iframe name  myframe1  id  myframe1  width  100   height  100   src  a html  gt   lt html gt       lt head gt  lt  head gt       lt frameset name  myframe2  cols  0   100   border  0  frameBorder  0  frameSpacing  0  gt           lt frame name  page1  src  c html  scrolling  no  gt  lt  frame gt           lt frame name  page2  src  d html   gt               lt html gt                   lt head gt  lt  head gt                   lt body id  top  gt                       lt div id  div1  gt                           lt div id  div2  gt                               lt div id  div3  gt                                   lt ul id  x  gt                                       lt li gt a lt  li gt                                       lt li gt b lt  li gt                                   lt  ul gt                               lt  div gt                           lt  div gt                       lt  div gt                   lt  body gt               lt  html gt            lt  frame gt        lt  frameset gt   lt  html gt   lt  iframe gt    I want to refer to the element  x   I tried in several ways but I couldn t find a solution

User · Answer

use contentDocument to achieve this  var iframe   document getElementById  iframeId    var innerDoc    iframe contentDocument                    iframe contentDocument                   iframe contentWindow document   var ulObj   innerDoc getElementById  ID TO SEARCH

User · Answer

document getElementById  myframe1   contentWindow document getElementById  x     Fiddle  contentWindow is supported by all browsers including the older versions of IE   Note that if the iframe s src is from another domain  you won t be able to access its content due to the Same Origin Policy

User · Answer

You need to make sure the frame is fully loaded the best way to do it is to use onload   lt iframe id  quot nesgt quot  src  quot  quot  onload  quot custom   quot  gt  lt  iframe gt   function custom        document getElementById  quot nesgt quot   contentWindow document         this function will run automatically when the iframe is fully loaded  it could be done with setTimeout but we can t get the exact time of the frame load  hope this helps someone

User · Answer

this is to add to the chosen answer   Make sure the iframe is loaded before you  contentWindow document   Otherwise  your getElementById will be null   PS  Can t comment  still low reputation to comment  but this is a follow-up on the chosen answer as I ve spent some good debugging time trying to figure out I should force the iframe load before selecting the inner-iframe element

User · Answer

In my case I was trying to grab pdfTron toolbar  but unfortunately its ID changes every-time you refresh the page   So  I ended up grabbing it by doing so   const pdfToolbar   document getElementsByTagName  iframe   0  contentWindow document getElementById  HeaderItems      As in the array written by tagName you will always have the fixed index for iFrames in your application

[javascript] How to pick element inside iframe using document.getElementById

Examples related to javascript

Examples related to html

Examples related to iframe

Examples related to getelementbyid

Examples related to frameset