Calling a parent window function from an iframe

Question

I want to call a parent window JavaScript function from an iframe      lt script gt      function abc                 alert  sss           lt  script gt    lt iframe id  myFrame  gt       lt a onclick  abc     href     gt Call Me lt  a gt   lt  iframe gt

User · Answer

parent abc   will only work on same domain due to security purposes   i tried this workaround and mine worked perfectly    lt head gt       lt script gt      function abc             alert  sss                  window of the iframe     var innerWindow   document getElementById  myFrame   contentWindow      innerWindow abc  abc        lt  script gt   lt  head gt   lt body gt       lt iframe id  myFrame  gt           lt a onclick  abc     href     gt Click Me lt  a gt       lt  iframe gt   lt  body gt    Hope this helps

User · Answer

You can use   window top   see the following    lt head gt       lt script gt      function abc             alert  sss               lt  script gt   lt  head gt   lt body gt       lt iframe id  myFrame  gt           lt a onclick  window top abc     href     gt Click Me lt  a gt       lt  iframe gt   lt  body gt

User · Answer

With Firefox and Chrome you can use     lt a href  whatever  target   parent  onclick  myfunction    gt    If myfunction is present both in iframe and in parent  the parent one will be called

User · Answer

The solution given by Ash Clarke for subdomains works great  but please note that you need to include the document domain    mydomain com   in both the head of the iframe page and the head of the parent page  as stated in the link same origin policy checks     An important extension to the same origin policy implemented for JavaScript DOM access  but not for most of the other flavors of same-origin checks  is that two sites sharing a common top-level domain may opt to communicate despite failing the  same host  check by mutually setting their respective document domain DOM property to the same qualified  right-hand fragment of their current host name    For example  if http   en example com  and http   fr example com  both set document domain to  example com   they would be from that point on considered same-origin for the purpose of DOM manipulation

User · Answer

lt a onclick  parent abc     href      gt Call Me  lt  a gt    See window parent  Returns a reference to the parent of the current window or subframe   If a window does not have a parent  its parent property is a reference to itself   When a window is loaded in an  lt iframe gt    lt object gt   or  lt frame gt   its parent is the window with the element embedding the window

User · Answer

I recently had to find out why this didn t work too   The javascript you want to call from the child iframe needs to be in the head of the parent  If it is in the body  the script is not available in the global scope    lt head gt       lt script gt      function abc             alert  sss               lt  script gt   lt  head gt   lt body gt       lt iframe id  myFrame  gt           lt a onclick  parent abc     href     gt Click Me lt  a gt       lt  iframe gt   lt  body gt    Hope this helps anyone that stumbles upon this issue again

User · Answer

Window postMessage    This method safely enables cross-origin communication    And if you have access to parent page code then any parent method can be called as well as any data can be passed directly from Iframe  Here is a small example   Parent page   if  window addEventListener        window addEventListener  message   onMessage  false              else if  window attachEvent        window attachEvent  onmessage   onMessage  false      function onMessage event           Check sender origin to be trusted     if  event origin      http   example com   return       var data   event data       if  typeof window data func       function             window data func  call null  data message               Function to be called from iframe function parentFunc message        alert message       Iframe code   window parent postMessage        func    parentFunc        message    Message text from iframe               Use target origin instead of     UPDATES   Security note   Always provide a specific targetOrigin  NOT    if you know where the other window s document should be located  Failing to provide a specific target discloses the data you send to any interested malicious site  comment by ZalemCitizen    References    Cross-document messaging Window postMessage   Can I Use

User · Answer

Another addition for those who need it   Ash Clarke s solution does not work if they are using different protocols so be sure that if you are using SSL  your iframe is using SSL as well or it will break the function   His solution did work for the domains itself though  so thanks for that

User · Answer

I have posted this as a separate answer as it is unrelated to my existing answer   This issue recently cropped up again for accessing a parent from an iframe referencing a subdomain and the existing fixes did not work   This time the answer was to modify the document domain of the parent page and the iframe to be the same  This will fool the same origin policy checks into thinking they co-exist on exactly the same domain  subdomains are considered a different host and fail the same origin policy check    Insert the following to the  lt head gt  of the page in the iframe to match the parent domain  adjust for your doctype     lt script gt      document domain    mydomain com    lt  script gt    Please note that this will throw an error on localhost development  so use a check like the following to avoid the error   if   window location href match  localhost gi         document domain    mydomain com

User · Answer

While some of these solutions may work  none of them follow best practices  Many assign global variables and you may find yourself making calls to multiple parent variables or functions  leading to a cluttered  vulnerable namespace    To avoid this  use a module pattern  In the parent window   var myThing         var i   0      myFunction   function                 do something           var newThing   Object create myThing     Then  in the iframe    function myIframeFunction          parent myThing myFunction        alert parent myThing i        This is similar to patterns described in the Inheritance chapter of Crockford s seminal text   Javascript  The Good Parts   You can also learn more at w3 s page for Javascript s best practices  https   www w3 org wiki JavaScript best practices Avoid globals

[javascript] Calling a parent window function from an iframe

Examples related to javascript

Examples related to iframe

Examples related to onclick