Capture iframe load complete event

Question

Is there a way to capture when the contents of an iframe have fully loaded from the parent page

User · Answer

Note that the onload event doesn t seem to fire if the iframe is loaded when offscreen  This frequently occurs when using  Open in New Window   w tabs

User · Answer

Neither of the above answers worked for me  however this did   UPDATE   As  doppleganger pointed out below  load is gone as of jQuery 3 0  so here s an updated version that uses on  Please note this will actually work on jQuery 1 7   so you can implement it this way even if you re not on jQuery 3 0 yet       iframe   on  load   function            do stuff

User · Answer

You can also capture jquery ready event this way        iframeid   ready function        Everything you need        Here is a working example   http   jsfiddle net ZrFzF

User · Answer

There is another consistent way  only for IE9   in vanilla JavaScript for this   const iframe   document getElementById  iframe    const handleLoad        gt  console log  loaded     iframe addEventListener  load   handleLoad  true    And if you re interested in Observables this does the trick   return Observable fromEventPattern    handler   gt  iframe addEventListener  load   handler  true     handler   gt  iframe removeEventListener  load   handler

User · Answer

lt iframe gt  elements have a load event for that     How you listen to that event is up to you  but generally the best way is to   1  create your iframe programatically  It makes sure your load listener is always called by attaching it before the iframe starts loading    lt script gt  var iframe   document createElement  iframe    iframe onload   function     alert  myframe is loaded          before setting  src  iframe src           document body appendChild iframe      add it to wherever you need it in the document  lt  script gt      2  inline javascript  is another way that you can use inside your HTML markup    lt script gt  function onMyFrameLoad       alert  myframe is loaded        lt  script gt    lt iframe id  myframe  src       onload  onMyFrameLoad this   gt  lt  iframe gt      3  You may also attach the event listener after the element  inside a  lt script gt  tag  but keep in mind that in this case  there is a slight chance that the iframe is already loaded by the time you get to adding your listener  Therefore it s possible that it will not be called  e g  if the iframe is very very fast  or coming from cache     lt iframe id  myframe  src       gt  lt  iframe gt    lt script gt  document getElementById  myframe   onload   function       alert  myframe is loaded        lt  script gt      Also see my other answer about which elements can also fire this type of load event

User · Answer

Step 1  Add iframe in template   lt iframe id  quot uvIFrame quot  src  quot www google com quot  gt  lt  iframe gt   Step 2  Add load listener in Controller  document querySelector  iframe uvIFrame   addEventListener  load   function         scope loading   false     scope  apply

[javascript] Capture iframe load complete event

Examples related to javascript

Examples related to html

Examples related to iframe

Examples related to load

Examples related to dhtml