多个iframe 加载

最新推荐文章于 2021-08-04 10:04:29 发布

tree3170

最新推荐文章于 2021-08-04 10:04:29 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 前端相关

本文链接：https://blog.youkuaiyun.com/tree3170/article/details/8279249

前端相关同时被 2 个专栏收录

47 篇文章

订阅专栏

JQuery

30 篇文章

订阅专栏

本文介绍了一种确保多个iframe按顺序加载的技术方案。通过监听iframe的加载完成事件，并递归调用自身来实现顺序加载，避免了并发加载可能导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遍历iframe，然后加载相应的iframe时，iframe不会是按顺序加载，按我的测试，应该是随机或者并列，

for(var i=0;i<iframe.length;i++){
	$("#iframe"+i).load(function(){
		i++;	
		alert(i);
	})
}

最终结果：所有的i的长度会是最大值

但是我一定要确定一个iframe都加载完了才能继续执行下一个iframe，所以，

// genaral iframe and log out all sc 
function generateFrameAndCloseSCs(){
//it the time goes 10s can't logout,it will enter the redirectLogout()
setTimeout("redirectLogout();",8000);
	
$.ajax({
			url:"<%=Config.getHomeURL()%>/PlugInManageAction.do?operation=getAllDyncMenu",
			type:"POST",
			dataType:"json",
			async:false,
			success:function(result){
				var SCURLList=result.SC_urlList;
				if(SCURLList.length!=0){
					var i=0;
					loadIframe(i,SCURLList);//travel load frame.
				}else{//if it didn't have dync menu ,it will direct into  login(); 
					redirectLogout();
				}
			}
		})	
}function loadIframe(i,SCURLList){
		var iframe = document.createElement("iframe");
		iframe.src = SCURLList[i];
		iframe.style.display='none';
		var length=SCURLList.length;
		if(i==length){
			redirectLogout();
		}else{//核心代码
			if (iframe.attachEvent){//IE
				iframe.attachEvent("onload", function(){
					i++;
					loadIframe(i,SCURLList);
				});
			} else {//not IE
				iframe.onload = function(){
					i++;
					loadIframe(i,SCURLList);
				};
			}
			document.body.appendChild(iframe); 
		}
 }