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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
浅谈js中的bind
Mar 18 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python中sys.argv参数用法实例分析
2015/05/20 Python
Python回调函数用法实例详解
2015/07/02 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
过滤器的用法
2013/10/08 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
高级电工工作职责
2013/11/21 职场文书
对公司合理化的建议书
2014/03/12 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android