js动态引入的四种方法


Posted in Javascript onMay 05, 2018

本文表述了关于js动态引入四种方式的实例代码。分享给大家供大家参考,具体如下:

index.html

<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.... 
那么第四种就是基于ajax请求的,且是推荐
*/ 
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动态引入,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
js中this对象用法分析
Jan 05 Javascript
微信小程序实现人脸识别
May 25 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
Javascript中的解构赋值语法详解
Apr 02 Javascript
关于HTML5的data-*自定义属性的总结
May 05 #Javascript
深入浅析Vue.js计算属性和侦听器
May 05 #Javascript
详解js跨域请求的两种方式,支持post请求
May 05 #Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python获取脚本所在目录的正确方法
2014/04/15 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python GUI模拟实现计算器
2020/06/22 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
期中考试反思800字
2014/05/01 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
处级干部考察材料
2014/12/24 职场文书
消防安全月活动总结
2015/05/08 职场文书
办公室年度工作总结2015
2015/05/21 职场文书