如何在第三方的iframe裝載

Question

我有下面的代碼來顯示和隱藏加載GIF在等待第三方iframe中刪除加載GIF：

HTML

<div id="waitmessage" class="hide"><img src="/static/images/global/wait.gif"/></div> 

的jQuery

$('.iframe').ready(function() { 
    $('#button').click(function() { 
     $('#waitmessage').removeClass('hide'); 
      alert('skywalker'); 
     }); 
    }); 
    $('.iframe').load(function() { 
    $('#waitmessage').remove(); 
}); 

但加載了iframe的情況下，GIF仍然在後臺加載。 iframe是主頁上的覆蓋圖。

Answer 1

不知何故，您正在等待.iframe準備就緒，並且選擇器沒有觸發此類事件，假設選擇器由於DOM尚未加載而返回null。因此，.ready事件處理程序中的任何內容都不會被執行。等待DOM加載的正確方法是使用預定義變量document。嘗試這個。

$(function() { 
 
    $('#console').text($('#console').text()+"\r\n"+'DOM is ready'); 
 
    $('#yt').on('load', function(){ 
 
     console.log('YouTube loaded'); 
 
     $('#console').text($('#console').text()+"\r\n"+'YouTube loaded'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="console"></pre> 
 
<iframe id="yt" width="560" height="315" src="https://www.youtube.com/embed/AhhEYe5Hczo" frameborder="0" allowfullscreen></iframe>