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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
动态加载js文件简单示例
Apr 21 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP四大安全策略
2014/03/12 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python  连接字符串(join %)
2008/09/06 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python如何统计序列中元素
2020/07/31 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Pyqt5实现英文学习词典
2019/06/24 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
军训学生自我鉴定
2014/02/12 职场文书
《去年的树》教学反思
2014/04/11 职场文书
运动会宣传口号
2014/06/09 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书