DOM 操作技术之动态脚本

最新推荐文章于 2022-05-20 22:43:51 发布

荆莿鸟的绝唱

最新推荐文章于 2022-05-20 22:43:51 发布

阅读量490

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/only_Love_Strangers/article/details/46835265

版权

js 专栏收录该内容

19 篇文章 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").οnclick= 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>