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脚本:a.js,以下是该文件的内容。
var str = "中国";
alert( "这是a.js中的变量:" + str );
主页面代码:
<script language="JavaScript">
function LoadJS( id, fileUrl )
{
    var scriptTag = document.getElementById( id );
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    if ( scriptTag  ) oHead.removeChild( scriptTag  );
    oScript.id = id;
    oScript.type = "text/javascript";
    oScript.src=fileUrl ;
    oHead.appendChild( oScript);
}
LoadJS( "a.js" );
alert( "主页面动态加载a.js并取其中的变量:" + str );
</script>
上述代码执行后 a.js 的 alert 执行并弹出消息,
但是 主页面产生了错误,没有弹出对话框。原因是 'str' 未定义,为什么呢?因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候,可以用下面的第四种方法。
4、原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象。
注意:a.js必须用UTF8编码保存,要不会出错。因为服务器与XML使用UTF8编码传送数据。
主页面代码:
<script language="JavaScript">
function GetHttpRequest()
{
    if ( window.XMLHttpRequest ) // Gecko
        return new XMLHttpRequest() ;
    else if ( window.ActiveXObject ) // IE
        return new ActiveXObject("MsXml2.XmlHttp") ;
}
function AjaxPage(sId, url){
    var oXmlHttp = GetHttpRequest() ;
    oXmlHttp.OnReadyStateChange = function() 
    {
        if ( oXmlHttp.readyState == 4 )
        {
            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
            {
                IncludeJS( sId, url, oXmlHttp.responseText );
            }
            else
            {
                alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
            }
        }
    }
    oXmlHttp.open('GET', url, true);
    oXmlHttp.send(null);
}
function IncludeJS(sId, fileUrl, source)
{
    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript = document.createElement( "script" );
        oScript.language = "javascript";
        oScript.type = "text/javascript";
        oScript.id = sId;
        oScript.defer = true;
        oScript.text = source;
        oHead.appendChild( oScript );
    }
}
AjaxPage( "scrA", "b.js" );
alert( "主页面动态加载JS脚本。");
alert( "主页面动态加载a.js并取其中的变量:" + str );
</script>
现在完成了一个JS脚本的动态加载。

JS动态加载JS的更多相关文章

  1. js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  2. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  3. JS动态加载 js css

    1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...

  4. js动态加载js文件(js异步加载之性能优化篇)

    1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...

  5. jquery js 动态加载 js文件

    jquery方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. JS动态加载JS文件

    有时候我们要根据场景加载不同的js文件,比如PC站加载某个文件,手机站不加载 <script> if ((navigator.userAgent.match(/(iPhone|iPod|A ...

  7. js 动态加载js 并执行

    function loadJS(url, success) { var domScript = document.createElement('script'); domScript.src = ur ...

  8. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  9. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

随机推荐

  1. linux虚拟环境搭建

    一.virtualenv的安装与使用 1.安装virtualenv pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virtualen ...

  2. Java中的日期、时间操作

    每次在处理日期时间的时候都要打开chrome查找一番,索性自己找一下满意的记录下来. 一.时间格式 // hh表示12小时制: HH表示24小时制 SimpleDateFormat format1 = ...

  3. Codeforce 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses(并查集&分组背包)

    题意: 给定n个价值为b 花费为w的物品, 然后某些物品是属于同一个组的, 给定一个花费限制V, 求在小于等于V的情况下取得到的价值最大为多少,能对于同一个组的物品,要么全取,要么只取一个. 分析: ...

  4. c++中的三角函数

    c++中想求cos或sin: 1.首先得包含头文件,include<math.h> 2.sin(),cos(),中是弧度数,即若是角度a,则应写成cou<<sin(a*pi/1 ...

  5. [bzoj2822][AHOI2012]树屋阶梯 (卡特兰数+分解质因数+高精度)

    Description 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为 ...

  6. Webdriver概述(selenium对应浏览器版本)

    Webdriver (Selenium2)是一种用于Web应用程序的自动测试工具,它提供了一套友好的API,与Selenium 1(Selenium-RC)相比,Webdriver 的API更容易理解 ...

  7. 不能更通俗了!KMP算法实现解析

    我之前对于KMP算法理解的也不是很到位,如果很长时间不写KMP的话,代码就记不清了,今天刷leetcode的时候突然决定干脆把它彻底总结一下,这样即便以后忘记了也好查看.所以就有了这篇文章. 本文在于 ...

  8. SOJ 2800_三角形

    真的是O不是0[看了discuss才发现.....一个大写的蠢 [题意]多个黑白三角形组成的倒三角,求白三角形组成的最大倒三角的面积 [分析]由于问的是倒三角个数,所以只需看与行数奇偶性相同的白色倒三 ...

  9. TOMCAT加载两次war包(重复加载)

    一.问题描述 项目中通过配置Context节点docBase,使docBase指向项目的绝对路径,可以直接通过IP加端口访问,今日发现意外bug,项目中某个功能奇数次执行成功,偶数次执行失败.二.问题 ...

  10. [bzoj2058][Usaco2010 Nov]Cow Photographs_树状数组_动态规划

    Cow Photographs bzoj-2058 Usaco-2010 Nov 题目大意:给定一个n的排列.每次操作可以交换相邻两个数.问将序列变成一个:$i,i+1,i+2,...,n,1,2,. ...