Question

I have three iframes in my website which src I don’t own.

HTML

    <iframe id="iframe" src="http://a.com"></iframe>
    <iframe id="iframe" src="http://b.com"></iframe>
    <iframe id="iframe" src="http://c.com"></iframe>

jQuery

$('iframe').load(function(){
     alert("Loaded");
});

The problem: Message “Loaded” is displayed thrice. I want the messaje “Loaded” to be displayed only once, just when all iframes load.

Answer 1

You can use a counter variable to count how many times load event is fired for iframe. You can show alert only when counter reaches 3.

count = 0;    
$('iframe').load(function(){
     count++;
     if(count == 3)
        alert("Loaded");
});

Edit: To alert when all the iframes in the page are loaded. We can find the total number of iframes in doucment.ready to ensure we get all iframes.

count = 0;   
totalFrames = 0; 
$(function(){
    totalFrames = $('iframe').length;
});
$('iframe').load(function(){
     count++;
     if(count == totalFrames)
        alert("Loaded");
});