iframeが読み込まれているかどうかを検出するにはどうすればよいですか？

ユーザーがボタンをクリックした後にiframeが読み込まれているかどうかを確認しようとしています。iframeが読み込まれているかどうかを検出するにはどうすればよいですか？

私は

$('#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>

任意の提案がありますか？

ところで、私のiframeは動的に作成されます。最初のページの読み込みでは読み込まれません。

出典

2012-09-04 Rouge

[クリック]（http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe） –

150

あなたは

$(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（jQueryを使用して）、これを試してください。

更新：平野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を使用します。

更新：また、あなたは、この（ダイナミックインラインフレーム）

$(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を試すことができます。

出典

2012-09-04 15:54:55

'負荷（）'である[非推奨]（のhttp：/ /api.jquery.com/category/deprecated/）？ – adeneo

答えSheikhに感謝します。しかし、私はMainpopupIframe要素がページがロードされるときに利用可能ではありません。 MainpopipIframeは、ユーザーがボタンをクリックすると作成されました。私の場合、.load関数は動作しません。とにかく必要な結果をアーカイブするには？ありがとう。 +1 – Rouge

@Rouge、更新された回答を試してください。あなたはこれが好きかもしれません。ありがとうございます:-) –

私はそのようにこれを想像：

<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>

出典

2012-09-04 15:57:13

あなたは、同様のonloadイベントを試すことができます。

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'); 

    };

出典

2017-12-07 22:34:54

iframeが読み込まれているかどうかを検出するにはどうすればよいですか？

答えて

関連する問題