Capture iframe load complete event
<iframe>
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.
<script>
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
</script>
2) inline javascript, is another way that you can use inside your HTML markup.
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>
3) You may also attach the event listener after the element, inside a <script>
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).
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>
Also see my other answer about which elements can also fire this type of load
event
Checking if iframe contents are loaded?
To be notified when the iFrame is loaded, you can still use the onload event today.
Create the iFrame and set an ID for JavaScript:
<iframe id="test" src="SRC_URL"></iframe>
Now access the iFrame with JavaScript and set an EventListener for the load event:
const iframe = document.getElementById("test");
iframe.addEventListener("load", function() {
console.log("Finish");
});
When the iFrame has finished loading, "Finish" is logged in the console. I have tested it with Google Chrome and it works fine.
Within the EventHandler you can then perform actions. For example, send a message:
iframe.contentWindow.postMessage({ title: "Hi", message: "Seems to work" }, targetOrigin);
Please also make sure that you have permission to embed the web page (X-frame options).
Detecting when Iframe content has loaded (Cross browser)
to detect when the iframe has loaded and its document is ready?
It's ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it's ready. Care is always required with cross-frame code execution as things can happen in an order you don't expect. Another alternative is to set ‘var isready= true;’ in its own scope, and have the parent script sniff for ‘contentWindow.isready’ (and add the onload handler if not).
If for some reason it's not practical to have the iframe document co-operate, you've got the traditional load-race problem, namely that even if the elements are right next to each other:
<img id="x" ... />
<script type="text/javascript">
document.getElementById('x').onload= function() {
...
};
</script>
there is no guarantee that the item won't already have loaded by the time the script executes.
The ways out of load-races are:
on IE, you can use the ‘readyState’ property to see if something's already loaded;
if having the item available only with JavaScript enabled is acceptable, you can create it dynamically, setting the ‘onload’ event function before setting source and appending to the page. In this case it cannot be loaded before the callback is set;
the old-school way of including it in the markup:
<img onload="callback(this)" ... />
Inline ‘onsomething’ handlers in HTML are almost always the wrong thing and to be avoided, but in this case sometimes it's the least bad option.
Catch the load event from iframes, using jQuery delegation
How can we detect any iframe load from the page using delegation?
Unfortunately, It is not possible catching the iframe load events via jQuery delegation.
load event inside iframe
you can select the iframe element and access its internal window object.
to do this first assign an id to your iframe
element
<iframe id="chosen-iframe" ...></iframe>
and to access the window use the following
const iframe = document.getElementById('chosen-iframe');
const iFrameWindowElement = iframe.contentWindow;
and with access to the window, you can create a script tag that contains the script you want to inject inside the iframe
var injectedScript = iFrameWindowElement.document.createElement("script");
injectedScript.append(...);
iFrameWindowElement.document.documentElement.appendChild(script);
Related Topics
Difference Between Client-Side and Server-side Programming
Download File Using an Ajax Request
How to Call PHP Functions by JavaScript
Execute PHP Function With Onclick
How to Read CSS Rule Values With JavaScript
Maximum Call Stack Size Exceeded Error
Jquery Mobile: Markup Enhancement of Dynamically Added Content
Encrypt With PHP, Decrypt With JavaScript (Cryptojs)
How to Refresh Page on Back Button Click
Determine Timezone from Latitude/Longitude Without Using Web Services Like Geonames.Org
Why Split the ≪Script≫ Tag When Writing It With Document.Write()
How to Load Up CSS Files Using JavaScript
How to Detect If JavaScript Is Disabled
Can Scripts Be Inserted With Innerhtml
Which "Href" Value Should I Use For JavaScript Links, "#" or "JavaScript:Void(0)"
Double Quotes Within PHP Script Echo
Stop/Close Webcam Stream Which Is Opened by Navigator.Mediadevices.Getusermedia
In Html5, Is the Localstorage Object Isolated Per Page/Domain