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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
用js实现放大镜效果
Oct 28 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创建PDF中文文档
2006/10/09 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
JavaScript延迟加载
2021/03/09 Javascript
新页面打开实际尺寸的图片
2006/08/25 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
销售内勤岗位职责
2014/04/15 职场文书
2014年个人委托书范本
2014/10/13 职场文书
初中信息技术教学计划
2015/01/22 职场文书