关闭

DOM 操作技术之动态脚本

179人阅读 评论(0) 收藏 举报
分类:
<pre name="code" class="html"><html>
	<head>
		<title>DOM_操作技术_动态脚本</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			/**
			 param url 需要加载的js的url。
			*/
			function loadScript(url){
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = url;
				document.body.appendChild(script);
			}
			
			/**
			 param code 需要执行动态的脚本
			*/
			function dynamicExecuteScript(code){
				var script = document.createElement("script");
				script.type = "text/javascript";
				try{
					script.appendChild(code);
				}catch(ex){
					script.text = code;
				}
				document.body.appendChild(script);
			}
			
			window.onload = function(){
				document.getElementById("loadScript").onclick = function(){
					//外部js加载
					loadScript("http://code.jquery.com/jquery-latest.js");
				}
				
				document.getElementById("button").onclick= function(){
					if(typeof($)=="undefined"){
						alert("请先加载jquery.js文件")
					}else{
						alert("选择器测试$(\"#myList li\").length的结果:"+$("#myList li").length);
					}
				}
				//值得注意的一个问题加载完js后,我怎么知道该文件已经加载完成?
				
				//从逻辑上讲,下面的DOM代码是有效的:
				/*
				var script1 = document.createElement("script");
				script1.type = "text/javascript";
				script1.appendChild(document.createTextNode("(function syaHi(){alert('hi');})();"));
				document.body.appendChild(script1);
				
				在FireFox、Safari、Chrome、Opera中,这些DOM元素可以运行,IE8及之前版本会报错。
			      IE将<script>视为一个特殊的元素,不允许DOM访问其子节点。不过,可以使用<script>
				  的text属性来指定javaScript代码,像下面例子这样:
				*/
				var script2 = document.createElement("script");
				script2.type = "text/javascript";
				script2.text = "(function(){alert('hi');})();"
				document.body.appendChild(script2);
				/*
				经过这样的修改后的代码可以在IE、Firefox、Opera和Safari3以及之后的版本中运行。
				Safari3.0之前的版本虽然不支持text属性,但允许使用文本节点技术来指定代码。如果
				需要兼容更早前版本的Safari,可以使用下列代码:
				*/
				var script3 = document.createElement("script");
				script3.type = "text/javascript";
				var code = "(function sayHi(){alert('hi');})();";
				try{
					script3.appendChild(code);
				}catch(ex){
					script3.text = code;
				}
				document.body.appendChild(script3);
				
				//下面调用的方法是整合的兼容代码
				dynamicExecuteScript("(function(){alert('调用dynamicExecuteScript()');})();");
				
				/*
				以这种方式加载的代码会在全局作用域中执行,而且当脚本执行后将立即可用。实际上
				这样执行的代码与全局作用域中把相同字符串传递给eval()是一样的。
				*/
				
			}
		</script>
	</head>
	<body>
		<div id="myDiv" class="myDiv" title="myDiv" lang="en" dir="rtl" diyAttr="diyAttr">
		</div>
		
		<ul id="myList">
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
		</ul>
		<button id = "loadScript">
			加载jquery.js
		</button>
		<button id = "button">
			测试jquery库是否可用
		</button>
	</body>
</html>



   
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12679次
    • 积分:315
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论