index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

   <meta content="text/html;charset=utf-8" http-equiv="content-type">

   <title> </title>

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

   <script src="dynamic.js"></script>

 </head>

 <body>

 </body>

</html>

test.js

alert("hello! I am test.js");

var str="1";

dynamic.js

//第一种方式：直接document.write 但这样会把当前的页面全覆写掉

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

//第二种方式:动态改变已有script的src属性

//s1.src="test.js"  

//第三种方式：动态创建script元素

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

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

    oScript.type = "text/javascript";

    oScript.src="test.js";

    oHead.appendChild(oScript);

*/

//其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~  

//alert(str);  

/*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走，

如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing.... 

<strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong>

*/  

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)

        {

           includeJS( sId, url, oXmlHttp.responseText );

        }

    }

    oXmlHttp.open('GET', url, false);//同步操作

    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.type = "text/javascript";

        oScript.id = sId;

        oScript.text = source;

        oHead.appendChild( oScript );

    }

}  

ajaxPage( "scrA", "test.js" );

alert( "主页面动态加载JS脚本。");

alert( "主页面动态加载a.js并取其中的变量：" + str );

js动态引入的四种方式的更多相关文章

  1. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

  2. js 实现复制功能的四种方式的优劣对比

    今日网上浏览别人项目,看到有人用了document.execCommand这个属性,于是想起之前我选用Clipboard.js 来实现.对于这种不常用的属性还是不太放心,于是随手查了下关于复制的资料, ...

  3. js数组去重的四种方式

    // 删除重复的 function only(arr){ for(var i=0;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ ...

  4. mappers标签引入映射器的四种方式

    第一种方式:mapper标签,通过resource属性引入classpath路径的相对资源 <!-- Using classpath relative resources --> < ...

  5. Delphi中动态创建窗体有四种方式

    Delphi中动态创建窗体有四种方式,最好的方式如下: 比如在第一个窗体中调用每二个,主为第一个,第二个设为动态创建 Uses Unit2; //引用单元文件 procedure TForm1.But ...

  6. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  7. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  8. ASP.NET MVC之下拉框绑定四种方式（十）

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

  9. 第三节：Action向View传值的四种方式(ViewData、ViewBag、TempData、Model)

    简  介 在前面的章节中,我们已经很清楚,MVC工作模型的流程,Controller中的Action接收到客户端的请求,处理后要将数据返回给View,那么Action中是如何将数据返回给View的,二 ...

随机推荐

  1. 对javascript this的理解

    对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...

  2. RAID设备

    RAID(Redundant Array of Independent Disk),独立冗余磁盘阵列(通常简称磁盘阵列).磁盘阵列的实质是将多个磁盘通过RAID控制器组合在一起,形成一个新的磁盘.这个 ...

  3. Android adb.exe程序启动不起来,如何处理

    经常遇到 Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be ...

  4. Squish License

    https://www.froglogic.com/squish/gui-testing/prices-and-licensing/index.php Prices and Licensing Who ...

  5. webrtc学习(二): audio_device之opensles

    audio_device是webrtc的音频设备模块.  封装了各个平台的音频设备相关的代码 audio device 在android下封装了两套音频代码. 1. 通过jni调用java的media ...

  6. Linux chmod command

    @ chmod改变一个或多个文件的存取模式 chmod [options] mode files 只有文件属主或特殊用户才能使用该功能来改变文件存取模式.mode可以是数字形式或who opcode ...

  7. http header详解

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模 型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源 ...

  8. 洛谷P1717 钓鱼

    P1717 钓鱼 41通过 116提交 题目提供者该用户不存在 标签贪心 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 话说发源于小朋友精心设计的游戏被电脑组的童鞋 ...

  9. 写过的HTML标签（一）

    HTML >   标题显示字体大小为<h1>. HTML 段落是通过标签 <p> 来定义的. HTML 链接是通过标签 <a> 来定义的.  实例: < ...

  10. CKEditor配置及使用

    注:使用CKEditor版本为js版本的CKEditor 4,所有配置均参考自CKEditor官方API:http://docs.ckeditor.com/,以及实践经验 一.快速使用 1.引入CKE ...