动态加载JS文件

简介: 两种方法: 1、通过创建一个Script标签,添加到head中,设置src路径;2、通过Ajax加载 js 文件,创建Script标签,添加到head中,设置Script的text属性为所加载 的js 文件的内容。

两种方法:

1、通过创建一个Script标签,添加到head中,设置src路径;
2、通过Ajax加载 js 文件,创建Script标签,添加到head中,设置Script的text属性为所加载js 文件的内容。

相同之处:都是异步加载
不同之处:一个是设置src路径,一个是通过Ajax加载 内容然后设置text。

相关帖子

方法一:

function include(url){ ele = document.createElement("script"); ele.setAttribute("type", "text/javascript"); ele.setAttribute("src", url); document.body.appendChild(ele); }

方法二:

function include(url) { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", url, false); xmlHttp.send(null); } function handleStateChange(){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { loadJS(); } } } function loadJS() { ele = document.createElement("script"); ele.setAttribute("type", "text/javascript"); ele.setAttribute("text", xmlHttp.responseText); document.getElementsByTagName('head').item(0).appendChild(ele); }

个人经验,推荐方法二。

目录
相关文章
|
20天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
21 0
|
1月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
21 0
|
2天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
8 3
|
2天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
10天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
21 0
|
13天前
|
Rust JavaScript 安全
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
|
13天前
|
运维 JavaScript Java
Serverless 应用引擎产品使用之阿里云Serverless函数计算中,在Node.js环境中执行jar文件如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
21 0
|
25天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
19 0
|
1月前
|
JavaScript
【vue】vue2 导入外部js文件如何拿到方法的返回值
【vue】vue2 导入外部js文件如何拿到方法的返回值
15 1
|
1月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
22 1