How to access parent Iframe from JavaScript

Question

Well  I have an IFrame  which calls a same domain page  My problem is that I want to access some information from this parent Iframe from this called page  from JavaScript   How can I access this Iframe   Details  There are several Iframes just like this one  that can have the same page loaded  because I am programming a Windows environment  I intend to close this Iframe  that s why I need to know which I should close from inside him  I have an array keeping references to these Iframes   EDIT  There iframes are generated dynamically

User · Answer

Maybe just use   window parent   into your iframe to get the calling frame   windows  If you had multiple calling frame  you can use   window top

User · Answer

I would recommend using the postMessage API   In your iframe  call   window parent postMessage  message   Hello world     http   localhost       In the page you re including the iframe you can listen for events like this   window addEventListener  message   function event          if event origin      http   localhost                    alert  Received message      event data message                 else                 alert  Origin not allowed                     false     By the way  it is also possible to do calls to other windows  and not only iframes   Read more about the postMessage API on John Resigs blog here

User · Answer

Simply call window frameElement from your framed page  If the page is not in a frame then frameElement will be null   The other way  getting the window element inside a frame is less trivial  but for sake of completeness           param f  iframe or frame element     return Window object inside the given frame     effect will append f to document body if f not yet part of the DOM     see Window frameElement     usage myFrame document   getFramedWindow myFrame  document      function getFramedWindow f        if f parentNode    null          f   document body appendChild f       var w    f contentWindow    f contentDocument       if w  amp  amp  w nodeType  amp  amp  w nodeType  9          w    w defaultView    w parentWindow       return w

User · Answer

Try this  in your parent frame set up you IFRAMEs like this    lt iframe id  frame1  src  inner html frame1  gt  lt  iframe gt   lt iframe id  frame2  src  inner html frame2  gt  lt  iframe gt   lt iframe id  frame3  src  inner html frame3  gt  lt  iframe gt    Note that the id of each frame is passed as an anchor in the src   then in your inner html you can access the id of the frame it is loaded in via location hash    lt button onclick  alert  I am frame      location hash substr 1    gt Who Am I  lt  button gt    then you can access parent document getElementById   to access the iframe tag from inside the iframe

User · Answer

Old question  but I just had this same issue and found a way to get the iframe  It s simply a matter of iterating through the parent window s frames   array and testing each frame s contentWindow against the window in which your code is running  Example   var arrFrames   parent document getElementsByTagName  IFRAME    for  var i   0  i  lt  arrFrames length  i        if  arrFrames i  contentWindow     window  alert  yay         Or  using jQuery   parent    iframe   each function iel  el      if el contentWindow     window  alert  got it          This method saves assigning an ID to each iframe  which is good in your case as they are dynamically created  I couldn t find a more direct way  since you can t get the iframe element using window parent - it goes straight to the parent window element  skipping the iframe   So looping through them seems the only way  unless you want to use IDs

User · Answer

you can use parent to access the parent page    So to access a function it would be   var obj   parent getElementById  foo

User · Answer

Also you can set name and ID to equal values   lt iframe id  frame1  name  frame1  src  any html  gt  lt  iframe gt    so you will be able to use next code inside child page  parent document getElementById window name

User · Answer

Once id of iframe is set  you can access iframe from inner document as shown below   var iframe   parent document getElementById frameElement id     Works well in IE  Chrome and FF

User · Answer

just in case some one is searching for a solution function get parent frame dom element win        win    win    window       var parentJQuery   window parent jQuery      var ifrms   parentJQuery  iframe upload iframe        for  var i   0  i  lt  ifrms length  i                  if  ifrms i  contentDocument     win document              return ifrms i             return null

[javascript] How to access parent Iframe from JavaScript

Examples related to javascript

Examples related to iframe