动态加载js，实例（不全）

最新推荐文章于 2022-09-06 11:08:49 发布

转载最新推荐文章于 2022-09-06 11:08:49 发布 · 1k 阅读

本文介绍了一种在网页中异步加载JavaScript文件并确保加载完成后执行特定方法的技术。通过实例展示了如何在iframe环境中实现这一过程，并讨论了网络速度慢等潜在问题及其解决方案。

其中：异步加载js,并且需要加载完成后调用其中的方法。所以需要判断 js什么时候加载完毕

详见 loadJs(...)方法

正常思考逻辑

1.确保iframe能相互调用

2.确保js方法本身确实没有问题

3.确保调用方法前，js加载完毕

4.兼容浏览器

5.其它原因可能会加载失败（网络缓慢）

网络慢的问题：

1.提示用户刷新页面

2.延迟重新加载

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>火车后台</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
	</head>
	</body>
	<script type="text/javascript">
	  function parentFram(){
	  	// document.getElementById("main").contentWindow.showPop();
	  	var str = ''
	  		+'<div id="pop" style="display:none;background:#fff;float:right;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;margin:0;padding:0;">'
			+'<div id="popHead" style="line-height:32px;background:#EAF30B;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;margin:0;padding:0;">'
			+'<a id="popClose" title="关闭" style="position:absolute;right:10px;top:1px;margin:0;padding:0;">关闭</a>'
			+'<h2 style="font-size:14px;color:#F32D2D;line-height:32px;height:32px;margin:0;padding:0;">温馨提示</h2>'
			+'</div>'
			+'<div id="popContent" style="padding:5px 10px;margin:0;padding:0;">'
			+'<dl>'
			+'<dt id="popTitle"><a href="http://yanue.info/" target="_blank" style="line-height:24px;font-size:14px;font-family:微软雅黑;color:#333;font-weight:bold;text-decoration:none;margin:0;padding:0;">这里是参数</a></dt>'
			+'<dd id="popIntro" style="text-indent:24px;line-height:160%;margin:5px 0;color:#666;mmargin:0;padding:0;">这里是内容简介</dd>'
			+'</dl>'
			+'<p id="popMore" style="text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;"></p>'
			 +'</div>'
			+'<br/><br/>';
	    var popDiv=document.createElement('div');
            popDiv.id="pop11";
            popDiv.style.position = 'fixed';
            popDiv.style.float = 'right';
            popDiv.style.bottom = '10px';
            popDiv.style.margin = 0;
            popDiv.style.padding = 0;
            popDiv.innerHTML = str;
	  	var oHead1 = document.getElementById("main").contentWindow.document.getElementsByTagName("body")[0]; 
	  	var scriptTag = document.getElementById("main").contentWindow.document.getElementById("pop");
	  	
	  	if(!scriptTag){
		  	oHead1.appendChild(popDiv)
	  	}
	  	// 加载js
	  	loadJs("script1","/js/jquery-1.4.2.min.js",function(){
	  		loadJs("script2","/js/back/yanue.pop.js",function(){
	  			document.getElementById("main").contentWindow.showPop();
	  		});
	  	});
	  }
	
	// 加载js
	
	function loadJs(id,url,callback){
		var oHead = document.getElementById("main").contentWindow.document.getElementsByTagName("head")[0]; 
		var oScript= document.createElement("script"); 
	    oScript.id = id;
	    oScript.async = "async"; 
	    oScript.type = "text/javascript"; 
	    oScript.src=url; 
	    
	    var oTag1 = document.getElementById("main").contentWindow.document.getElementById(id);
	    
	  	if(!oTag1){
		  	oHead.appendChild(oScript);
	  	}
	    oScript.onload = oScript.onreadystatechange = function(){ 
			if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){   
				callback();
			}else{
				alert("can not load the "+url+" file");

				// setTimeOut('','3000'); 重新加载
		    }
	 	}
	}
</script>
	<frameset rows="64,*" frameborder="NO" border="0" framespacing="0">
		<frame src="/trainBack/indexTop" noresize="noresize" frameborder="NO"
			name="topFrame" scrolling="no" marginwidth="0" marginheight="0"
			target="main" />
		<frameset cols="200,*" rows="10000,*" id="frame">
			<frame src="/trainBack/indexLeft" name="leftFrame"
				noresize="noresize" marginwidth="0" marginheight="0" frameborder="0"
				scrolling="auto" target="main" />
			<frame src="/trainBack/indexRight" id="main" name="main"
				marginwidth="0" marginheight="0" frameborder="0" scrolling="auto"
				target="_self" />
		</frameset>
	</frameset>
	<noframes>
		<body>
		</body>
	</noframes>
</html>

left.jsp

parent.parentFram();