javascript - jQuery iframe load() 事件?

我有一个用$.ajax()插入的iframe,我想在iframe的内容完全加载后做一些事情:


....
 success: function(html){ // <-- html is the IFRAME (#theiframe)
 $(this).html(html); // $(this) is the container element
 $(this).show();
 $('#theiframe').load(function(){
 alert('loaded!');
 } 
....

它可以工作,但我看到IFRAME被加载两次(警报也显示两次)。

时间:

如果可能,最好在iframe的文档中处理load事件,并调用包含文档中的函数,这有在所有浏览器中工作的优点,并且只运行一次。

在主文档中:


function iframeLoaded() {
 alert("Iframe loaded!");
}

在iframe文档中:


window.onload = function() {
 parent.iframeLoaded();
}

使用iframe onload事件


$('#theiframe').on("load", function() {
 alert(1);
}

这是我看到的同样的行为: load()的将首先在一个空的iframe上激发,然后在你的页面加载时。

编辑:嗯,有趣。你可以增加事件处理程序中的计数器,或者忽略第一个 load 事件,或者忽略任何重复的load 事件。

你可以使用内容方法的来获取iframe的内容。

Iframe内容可以设置cookie,


//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
 cookieValue = $.cookie('iframeToken'); 
 if (cookieValue == token)
 {
 window.clearInterval(iframeLoadCheckTimer );
 $.cookie('iframeToken', null, {
 expires: 1, 
 path: '/'
 });
 }
 }, 1000);

在iframe中:


<script>
 $(function() {
 var w = window;
 if (w.frameElement != null
 && w.frameElement.nodeName ==="IFRAME"
 && w.parent.jQuery) {
 w.parent.jQuery(w.parent.document).trigger('iframeready');
 }
 });
</script>

在包含页中:


<script>
 function myHandler() {
 alert('iframe (almost) loaded');
 }
 $(document).on('iframeready', myHandler);
</script>


$(window).on('load', function() { ... });

...