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. 异常处理之namespace找不到

    最近在做控件的时候遇到了这么一个异常 就是说类库中明明就有命名空间,但是在winForm中引用的时候也能正常显示, 可是编译的时候却报 找不到指定的命名空间 这样的异常,头痛了好久,结果看到了winF ...

  2. Fedora 23如何安装LAMP服务器

    LAMP 是开源系统上 Web 服务器的梦幻组合.LAMP 是 Linux. Apache HTTP 服务. MySQL/MariaDB 数据库和 PHP. Perl 或 Python 的简称. 下面 ...

  3. Systemd 入门教程：实战篇

    Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 System ...

  4. IOS开发之路三（XML解析之KissXML的使用）

    最近再做一个项目需要用到xml的解析.今天查了一些资料自己做了一个小demo.纯OC没有界面.. 在IOS平台上进行XML文档的解析有很多种方法,在SDK里面有自带的解析方法,但是大多情况下都倾向于用 ...

  5. 让Laravel5支持memcache的方法

    Laravel5框架在Cache和Session中不支持Memcache,看清了是Memcache而不是Memcached哦,MemCached是支持的但是这个扩展真的是装的蛋疼,只有修改部分源码让其 ...

  6. flume1.5.2安装与简介

    关于flume的简介看参考:http://www.aboutyun.com/thread-7415-1-1.html 其实一张图就简单明了了 简单安装: 1.下载解压 ... 2.配置JDK,flum ...

  7. ASP.NET MVC与WebForm区别

    [转贴一] 使用ASP.NET MVC框架,创建默认项目,第一直观感觉就是地址都是Rewrite过的.对源码和配置文件稍加分析不难看出,MVC使用了httpModules来拦截地址请求,具体用到了Sy ...

  8. html 文件上传框 input标签

    文件上传框 有时候,需要用户上传自己的文件,文件上传框看上去和其它 文本域差不多,只是它还包含了一个浏览按钮.访问者可以通 过输入需要上传的文件的路径或者点击浏览按钮选择需要上传 的文件. 代码格式: ...

  9. uiview 的transitionWithView 方法使用

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [UIView transitionWithView:_imageV ...

  10. cocosbuilder中使用字体描边时，字符重叠，间距过小问题

    cocosbuilder中使用字体描边时,字符重叠,间距过小问题 cocos2d-x 3.7 v3.7解析cocosbuilder中描边字体的代码如下: void LabelTTFLoader::pa ...