iFrame src change event detection

Question

Assuming I have no control over the content in the iframe  is there any way that I can detect a src change in it via the parent page  Some sort of onload maybe   My last resort is to do a 1 second interval test if the iframe src is the same as it was before  but doing this hacky solution would suck   I m using the jQuery library if it helps

User · Accepted Answer

You may want to use the onLoad event  as in the following example    lt iframe src  http   www google com   onLoad  alert  Test     gt  lt  iframe gt    The alert will pop-up whenever the location within the iframe changes  It works in all modern browsers  but may not work in some very older browsers like IE5 and early Opera   Source   If the iframe is showing a page within the same domain of the parent  you would be able to  access the location with contentWindow location  as in the following example    lt iframe src   test html  onLoad  alert this contentWindow location    gt  lt  iframe gt

User · Answer

If you have no control over the page and wish to watch for some kind of change then the modern method is to use MutationObserver  An example of its use  watching for the src attribute to change of an iframe   x000D   x000D  new MutationObserver function mutations    x000D    mutations some function mutation    x000D      if  mutation type      attributes   amp  amp  mutation attributeName      src     x000D        console log mutation   x000D        console log  Old src     mutation oldValue   x000D        console log  New src     mutation target src   x000D        return true  x000D        x000D   x000D      return false  x000D        x000D     observe document body    x000D    attributes  true  x000D    attributeFilter    src    x000D    attributeOldValue  true  x000D    characterData  false  x000D    characterDataOldValue  false  x000D    childList  false  x000D    subtree  true x000D      x000D   x000D  setTimeout function     x000D    document getElementsByTagName  iframe   0  src    http   jsfiddle net    x000D     3000   x000D   lt iframe src  http   www google com  gt  lt  iframe gt  x000D   x000D   x000D    Output after 3 seconds  MutationRecord  oldValue   http   www google com   attributeNamespace  null  attributeName   src   nextSibling  null  previousSibling  null     Old src   http   www google com New src   http   jsfiddle net     On jsFiddle  Posted answer here as original question was closed as a duplicate of this one

User · Answer

Here is the method which is used in Commerce SagePay and in Commerce Paypoint Drupal modules which basically compares document location href with the old value by first loading its own iframe  then external one   So basically the idea is to load the blank page as a placeholder with its own JS code and hidden form  Then parent JS code will submit that hidden form where its  action points to the external iframe  Once the redirect submit happens  the JS code which still running on that page can track your document location href value changes   Here is example JS used in iframe     function        Drupal behaviors commercePayPointIFrame         attach  function  context  settings          if  top location    location               html   hide            top location href   document location href                        jQuery     And here is JS used in parent page     function                 Automatically submit the hidden form that points to the iframe          Drupal behaviors commercePayPoint         attach  function  context  settings             div payment-redirect-form form   context  submit             div payment-redirect-form  edit-submit   context  hide             div payment-redirect-form  checkout-help   context  hide                 jQuery     Then in temporary blank landing page you need to include the form which will redirect to the external page

User · Answer

Answer based on JQuery  lt  3      iframeid   load function        alert  frame has  re loaded          As mentioned by subharb  as from JQuery 3 0 this needs to be changed to       iframe   on  load   function         alert  frame has  re loaded           https   jquery com upgrade-guide 3 0  breaking-change-load-unload-and-error-removed

User · Answer

Since version 3 0 of Jquery you might get an error     TypeError  url indexOf is not a function   Which can be easily fix by doing      iframe   on  load   function         alert  frame has  re loaded

User · Answer

Note  The snippet would only work if the iframe is with the same origin   Other answers proposed the load event  but it fires after the new page in the iframe is loaded  You might need to be notified immediately after the URL changes  not after the new page is loaded   Here s a plain JavaScript solution    x000D   x000D  function iframeURLChange iframe  callback    x000D      var unloadHandler   function      x000D             Timeout needed because the URL changes immediately after x000D             the  unload  event is dispatched  x000D          setTimeout function      x000D              callback iframe contentWindow location href   x000D             0   x000D         x000D   x000D      function attachUnload     x000D             Remove the unloadHandler in case it was already attached  x000D             Otherwise  the change will be dispatched twice  x000D          iframe contentWindow removeEventListener  unload   unloadHandler   x000D          iframe contentWindow addEventListener  unload   unloadHandler   x000D        x000D   x000D      iframe addEventListener  load   attachUnload   x000D      attachUnload    x000D    x000D   x000D  iframeURLChange document getElementById  mainframe    function  newURL    x000D      console log  URL changed    newURL   x000D      x000D   lt iframe id  mainframe  src    gt  lt  iframe gt  x000D   x000D   x000D    This will successfully track the src attribute changes  as well as any URL changes made from within the iframe itself   Tested in all modern browsers   I made a gist with this code as well  You can check my other answer too  It goes a bit in-depth into how this works

User · Answer

The iframe always keeps the parent page  you should use this to detect in which page you are in the iframe   Html code    lt iframe id  iframe  frameborder  0  scrolling  no  onload  resizeIframe this   width  100   src  www google com  gt  lt  iframe gt    Js       function resizeIframe obj            alert obj contentWindow location pathname

[javascript] iFrame src change event detection?

Examples related to javascript

Examples related to jquery

Examples related to iframe

Examples related to onload