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. 关于Autofac的使用陷阱

    说明:本文是对参考文章的一个整理,做一个记录,基本没有翻译,详情请参看原文. 使用注意要点: Autofac will track every disposable component instanc ...

  2. 进程产生的三种方式：fork、system和exec

    1.fork()方式 fork()函数以父进程为蓝本复制一个进程,其ID号与父进程ID号不同.在Linux环境下,fork()是以写复制实现的,只有内存等与父进程不同,其他与父进程共享,只有在父进程或 ...

  3. ApplePay高调入华，教你在app里上线ApplePay

      ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...

  4. DIH处理包含回车符换行符html标签内容的文本

    数据样例:2010-03-19 10:18:06130010543234203guqun09-12月-12liuyin18-6月 -14<P style="MARGIN-TOP: 0p ...

  5. Java Hashtable类

    哈希表(Hashtable)是原来的java.util中的一部分,是一个字典的具体实现. 然而,Java2重新设计的哈希表,以便它也实现了​​Map接口.因此,哈希表现已集成到集合框架.它类似于Has ...

  6. 沈逸老师PHP魔鬼特训笔记（4）

    上一课我们通过shell脚本拷贝代码,了解了静态方法和静态属性.(还有个附件PHAR包,我直接无视了) 然后在GOD文件中写了一些参数, 我们也可以这样,把方法名像拼凑字符串一样拼起来. $get_p ...

  7. jquery plugins —— Chosen

    官网地址:http://harvesthq.github.io/chosen/ Chosen (v1.4.2) Chosen has a number of options and attribute ...

  8. linux之磁盘配额(quota)

    1.什么是quota 简单的说就是限制用户对磁盘空间的使用量. 因为Linux是多用户多任务的操作系统,许多人共用磁盘空间,为了合理的分配磁盘空间,于是就有了quota的出现. 2.quota的用途  ...

  9. poj 1191 矩形块的划分

    思路:黑书的例题 #include<iostream> #include<cstring> #include<algorithm> #include<cmat ...

  10. Oracl用代码建标

    建标还可以通过编写代码的方式实现,这样在建许多类似的表的时候可以极高建表的效率. create table SCORE                   --建立表名(                ...