DOM 操作技术之动态脚本

原创 2015年07月10日 21:30:55
<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>




            
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javaScript DOM操作技术

在一般情况下我们操作DOM都比较简单明了,尤其是jquery出来之后,我们会发现操作DOM变得如此简单,但是也会有许多隐藏的坑,所以有时候操作DOM也并非想象中那么简单; 简单而常用的操作: 访问节点...

动态操作dom

  • 2016-01-18 17:55
  • 582B
  • 下载

轻松学习JavaScript二十六:DOM编程学习之动态添加JS脚本和CSS样式

先来一贯使用的HTML文档代码: DOM window.onload=function(){ } div区域        一动态加载外部JS文件        要动态加载...

斗鱼TV自动抢火箭鱼丸脚本——JavaScript DOM操作

一个能自动抢鱼丸,自动发弹幕,还能按键显示你抢到的鱼丸数量的脚本的开发过程...

在JavaScript中使用DOM技术动态控制表格 .

相对于IE提供的对表格的insertCell、insertRow等方法,使用DOM显得可移植更好一些 下面的例子中,是一个3*2的表格,按下按钮后,删除第二行,然后再插入一个新行,该代码在IE6...

DOM操作XML,XPATH技术

  • 2014-08-14 16:03
  • 29KB
  • 下载

极客技术专题【006期】:jQuery初学者入门-DOM操作

日期:2013-8-12  来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第二期] 分享人:极客标签技术编辑 - Lana 授课时间:2013/08/15(本周...
  • jjfat
  • jjfat
  • 2013-08-12 10:24
  • 723

24、DOM的高级应用1-------表格的动态删除和添加行的操作

1、DOM的高级应用1-------表格的动态删除和添加行的操作 2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式 3、代码的实现 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)