js加载之使用DOM方法动态加载Javascript文件

传统上,加载Javascript文件都是使用<script>标签。
就像下面这样:
<script type="text/javascript" src="example.js"></script>
 
<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。
  (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。
  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。
为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。


代码如下:

  function loadScript(url){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
  }

这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

时间: 2013-11-05

javascript中html字符串转化为jquery dom对象的方法

原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

浅析JS操作DOM的一些常用方法

getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.

AngularJS实现动态编译添加到dom中的方法

本文实例讲述了AngularJS实现动态编译添加到dom中的方法.分享给大家供大家参考,具体如下: 在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示. 使用 方法如下: <html ng-app="app"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> &l

js常用DOM方法详解

介绍几个js DOM的常用方法 获取元素节点 getElementById    getElementsByTagName    getElementsByClassName 先写一个简单的网页做测试: /* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <

javascript先序遍历DOM树的方法

DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2中的"Traversal"模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历. 注:本文中的5种方法都是对DOM的先序遍历方法(深度优先遍历),并且只关注Element类型. 1. 使用DOM1中的基础接口,递归遍历DOM树 DOM1中为基础类型Nod

原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

js使用DOM操作实现简单留言板的方法

本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

浅谈javascript中的DOM方法

1:获取对象的三种方法 1)document.getElementById(id);通过对象的属性id来获取; 2)element.getElementByTagName(tag);通过标签名来获取; 3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)obj

javascript firefox兼容ie的dom方法脚本

if(!document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.  解决方法:统一使用[]获取集合类对象.  3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.  解决方法:统一通过getAttribute()获取自定义属性.  4.IE

IE和Firefox下javascript的兼容写法小结

1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username").value); </

JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

让firefox支持IE的一些方法的javascript扩展函数代码

这一段使得FireFox也支持IE的innerText方法 复制代码 代码如下: function isIE(){ if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) return true; else return false; } if(!isIE()){ //firefox innerText define HTMLElement.prototype.__defineGetter__( "

基于JavaScript获取鼠标位置的各种方法

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

JavaScript评论点赞功能的实现方法

通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setTimeout设置定时器. 4.使用clearTimeout清除定时器以及事件代理的运用. 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容. 删除事件: 利用事件代理功能,在父元素节点上添加事件,以减少代码量和系统运行负荷. 事件代理的时候,使用事件对象中的srcElem

javascript之IE版本检测超简单方法

近年来随着操作系统的升级以及各种新技术的开发普及,抛弃低版本IE已经是大势所趋,这对于前端人员来时是个好消息,可以不用花费太多的时间来做低版本的兼容,很多站点采用给予低版本IE以提示的方式(恩,很友好很人道)给游客,一般是在header上给一个提示,脚本检测如下: function getIEVersion() { var rv = -1; // Return value assumes failure. if(navigator.appName == 'Microsoft Internet E

javascript计时器编写过程与实现方法

JavaScript是一门非常容易上手的脚本语言,而且工具繁多,功能强大,因为一直做后端的关系,笔者目前也只是略学一点皮毛. 接下来进入正题--计时器.先谈下计时器的功能: 1.计时器要能够在页面上显示时间 2.每秒钟计时器刷新,秒每满60进分钟1,分钟每满60进小时1 3.计时器需要能够重置,也就是重新计时 4.计时结束时,需要能够有获取计时时间的方法 以上功能很简单,计时还应该有暂停.继续计时等功能,没关系,我们一个一个来. 第一步: 我们做一个简单的页面,要有一个现实时间的标签,要有开始.

JavaScript转换数据库DateTime字段类型方法

Javascript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在html(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 在1995年时,由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成.因为Netscape与Sun合作,Netscape管理层希望它外观看起来像java,因此取名为JavaScript.但实际上