三种方法动态加载Js文件

Javascript 1603 0 2013-03-30

三种方法动态加载Js文件
碰到需要加载多个Js文件的情况,使用选择性的动态加载Js ,可以提高页面显示的速度和效率。

下面介绍三种异步执行加载Js 脚本的方法。

1、直接document.write

<script language="javascript">

    document.write("<script src='test.js'><\/script>");

</script>

2、动态改变已有script的src 属性

<script src='' id="s1"></script>

<script language="javascript">

    s1.src="test.js"

</script>

3、动态创建 script元素

<script>

    var oHead = document.getElementsByTagName('HEAD').item(0);

    var oScript= document.createElement("script");

    oScript.type = "text/javascript";

    oScript.src="test.js";

    oHead.appendChild( oScript);

</script>

注 ,

这三种方法都是异步的,所以在采用这类方法动态加载Js 的同时,主界面的Js脚本是继续执行的,所以可能出现通过异步加载的Js代码得不到预期的效果的情况。这时候可以考虑采用Ajax加载Js的方法。

大概原理 :用XMLHTTP取得要脚本的内容,再创建 Script 对象。另外注意编码的保持一致。因为服务器与XML使用UTF8编码传送数据。

上一篇:js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

下一篇:动态加载JS文件(支持各种浏览器)

讨论数量:1

天涯网魂 3 杠 5 星2013-03-30 16:22:49

用jQuery动态加载javascript脚本文件

 

上篇文章我使用普通的方法做了一个动态加载脚本和css文件的方法
这次用jQuery来实现,代码非常简洁,jQuery类库的强大与此处可见一斑

function loadJs(file){
     var head = $('head').remove('#loadScript');
    $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo(head);
}

够简单把!如果在浓缩以下你甚至可以用一行代码全部搞定:
$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo($('head').remove('#loadScript'));

jQuery的链式代码就是强大! 

请先登录再发表讨论。 2024-04-28

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链