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. SSD(固态硬盘)简介

    http://www.jinbuguo.com/storage/ssd_intro.html

  2. Servlet 3.0 新特性

    Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若干新特性用于简化 Web 应用的开发 ...

  3. IPC——命名管道

    Linux进程间通信——使用命名管道 转载:http://blog.csdn.net/ljianhui/article/details/10202699 在前一篇文章——Linux进程间通信——使用匿 ...

  4. Sublime text 2下alignment插件无效的解决办法

    在sublime text 2中安装了alignment插件,但使用快捷键‘ctrl+alt+a'无效,经过各种方法依然无效,最后找到了这个“Doesn't work at all for me (f ...

  5. LeetCode20 Valid Parentheses

    题意: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...

  6. html 文件上传框 input标签

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

  7. Good subsequence( RMQ+二分)

    Description Give you a sequence of n numbers, and a number k you should find the max length of Good ...

  8. 【阿里云产品公测】OTS使用之简单线上产品实践基于PythonSDK

    阿里云用户:morenocjm 实践是检验真理的唯一标准,学习技术需要通过实践过程中的不断尝试,才能够快速掌握要领.OTS是构建在阿里云飞天分布式系统之上的NoSQL数据库服务,提供海量结构化数据的存 ...

  9. Flex学习总结

    Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境,   Flash Player的工作模 ...

  10. php 短信网关短信内容不能有空格

    最近在做一个短信通知功能,接口参数都按文档写好了,就是不能发送短信,查了半天,原来是短信内容有空格,之前短信用的英文标点符号,符号后都有一个空格,用了date('Y-m-d H,i,s')函数,后来把 ...