Tôi làm cách nào để phát hiện liệu iframe có được tải không?

Tôi đang cố gắng kiểm tra xem iframe có được tải sau khi người dùng nhấp vào nút hay không.Tôi làm cách nào để phát hiện liệu iframe có được tải không?

Tôi có

$('#MainPopupIframe').load(function(){ 
    console.log('load the iframe') 
    //the console won't show anything even if the iframe is loaded. 
})

HTML

<button id='click'>click me</button> 

//the iframe is created after the user clicks the button. 
<iframe id='MainPopupIframe' src='http://...' />...</iframe>

Bất kỳ lời đề nghị?

Nhân tiện, iframe của tôi được tạo động. Nó không tải với tải trang ban đầu.

Nguồn

2012-09-04 Rouge

[Nhấn vào đây] (http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe) –

150

Bạn có thể thử này (sử dụng jQuery)

$(function(){ 
 
    $('#MainPopupIframe').load(function(){ 
 
     $(this).show(); 
 
     console.log('laod the iframe') 
 
    }); 
 
     
 
    $('#click').on('click', function(){ 
 
     $('#MainPopupIframe').attr('src', 'https://heera.it');  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='click'>click me</button> 
 

 
<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO.

Cập nhật: Sử dụng đơn giản javascript

window.onload=function(){ 
 
    var ifr=document.getElementById('MainPopupIframe'); 
 
    ifr.onload=function(){ 
 
     this.style.display='block'; 
 
     console.log('laod the iframe') 
 
    }; 
 
    var btn=document.getElementById('click');  
 
    btn.onclick=function(){ 
 
     ifr.src='https://heera.it';  
 
    }; 
 
};

<button id='click'>click me</button> 
 

 
<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

jsfiddle DEMO.

Cập nhật: Ngoài ra bạn có thể thử này (iframe động)

$(function(){ 
 
    $('#click').on('click', function(){ 
 
     var ifr=$('<iframe/>', { 
 
      id:'MainPopupIframe', 
 
      src:'https://heera.it', 
 
      style:'display:none;width:320px;height:400px', 
 
      load:function(){ 
 
       $(this).show(); 
 
       alert('iframe loaded !'); 
 
      } 
 
     }); 
 
     $('body').append(ifr);  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='click'>click me</button><br />

jsfiddle DEMO.

Nguồn

2012-09-04 15:54:55

'tải() 'là [bị phản đối] (http://api.jquery.com/category/deprecated/)? – adeneo

Cảm ơn câu trả lời Sheikh. Tuy nhiên, tôi không có các phần tử MainpopupIframe có sẵn khi trang được tải. MainpopipIframe được tạo sau khi người dùng nhấp vào nút. chức năng .load không hoạt động trên trường hợp của tôi. Dù sao để lưu trữ kết quả tôi cần? Cảm ơn. +1 – Rouge

@Rouge, hãy thử câu trả lời được cập nhật. Bạn có thể thích điều này. Cảm ơn :-) –

Tôi tưởng tượng này như thế:

<html> 
<head> 
<script> 
var frame_loaded = 0; 
function setFrameLoaded() 
{ 
    frame_loaded = 1; 
    alert("Iframe is loaded"); 
} 
$('#click').click(function(){ 
    if(frame_loaded == 1) 
    console.log('iframe loaded') 
    } else { 
    console.log('iframe not loaded') 
    } 
}) 
</script> 
</head> 
<button id='click'>click me</button> 

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe>

Nguồn

2012-09-04 15:57:13

Bạn có thể thử sự kiện onload cũng;

var createIframe = function (src) { 
     var self = this; 
     $('<iframe>', { 
      src: src, 
      id: 'iframeId', 
      frameborder: 1, 
      scrolling: 'no', 
      onload: function() { 
       self.isIframeLoaded = true; 
       console.log('loaded!'); 
      } 
     }).appendTo('#iframeContainer'); 

    };

Nguồn

2017-12-07 22:34:54

Tôi làm cách nào để phát hiện liệu iframe có được tải không?

Trả lời

Các vấn đề liên quan