前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >动态加载JS文件

动态加载JS文件

作者头像
路过君
发布于 2021-12-07 08:27:15
发布于 2021-12-07 08:27:15
20.8K00
代码可运行
举报
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const scriptEl = document.createElement('script');
scriptEl.onload = scriptEl.onreadystateschange = function () {
	if (!this.readyState // FF onload
        || this.readyState == 'loaded' || this.readyState == 'complete' // IE onreadystateschange
    ) {
	    // 脚本加载完成后执行某些逻辑
	    // IE支持onreadystateschange事件
	    // FF支持onload事件
    }
};
scriptEl.src = '/myscript.js';
document.body.appendChild(scriptEl);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/06/21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js实用方法记录-js动态加载css、js脚本文件
方法测试:openApp('ios页面','**.apk','metools://home');
易墨
2018/09/14
18.1K0
动态加载js的异步与同步方法
最近新项目需要根据参数切换js的版本,就需要动态加载js,动态加载js涉及到异步加载与同步加载的问题,所以就封装了一下下面两个方法,以供使用。
用户10106350
2022/10/28
4.9K0
js怎么动态加载js文件(JavaScript性能优化篇)转
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度
stys35
2019/10/29
19.9K0
在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果
常见的在线客服系统中,或者是统计代码中,粘贴一段js代码,就能引入某个插件的效果。这个是怎么实现的呢?
唯一Chat
2022/11/22
2K0
在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果
如何动态加载js?
第三方的js文件,自己写的js文件,js越来越多了怎么办? 提出问题: 1、js文件太多了,每个页面都写<script src="...">太麻烦。 2、如果路径变化了,或者js名称变化了怎么办?每个页面都改一遍吗? 3、如何约束js文件的加载顺序?a.js定义了一个函数,b.js要调用,但是b.js先加载了,a.js还没加载完成,造成函数未定义,无法调用。 4、js文件的合并。开发阶段,js会分成多个文件,这样便于开发。但是成熟了之后会合并成一个文件。这样引用方式就会变化,原先引用一堆js,现在只需要引用
用户1174620
2018/02/08
13.3K0
document.onreadystatechange_js转json格式
onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中,当的该对象的 load state 改变时,会触发此事件。
全栈程序员站长
2022/09/20
3K0
【说站】javascript如何动态加载js文件
2、通过xhr方式加载js文件,不过通过这种方式的话,就可能会面临着跨域的问题。
很酷的站长
2022/11/23
7.4K0
【说站】javascript如何动态加载js文件
动态加载外部css或js文件
function loadjscssfile(filename, filetype){ if (filetype=="js"){ //判断文件类型   var fileref=document.createElement('script')//创建标签   fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript   fileref.setAttribute("src", filename)//文件的地址 } else if (filetype=="css"){ //判断文件类型   var fileref=document.createElement("link")   fileref.setAttribute("rel", "stylesheet")   fileref.setAttribute("type", "text/css")   fileref.setAttribute("href", filename) } if (typeof fileref!="undefined")   document.getElementsByTagName("head")[0].appendChild(fileref) }
jack.yang
2025/04/05
580
高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理U
Sb_Coco
2018/05/28
9960
网站性能优化(三)异步加载脚本
原则上来说,HTML在使用<script>标签加载外部脚本文件时,会顺序下载,顺序执行,并阻碍其他资源文件的下载,比如图片(当然,如今主流浏览器是可以实现JS和CSS文件并行下载)。
娜姐
2022/05/13
1.4K0
网站性能优化(三)异步加载脚本
资源文件的动态加载
页面加载 首先,浏览器发起直接对目标html的请求,然后分析其中用到的资源并下载,浏览器有自己的规则来判断什么样的资源可以被并行下载,什么样的不可以,浏览器对加载顺序有着特殊的喜好:   JS的出现会延迟后续CSS的下载,因为JS会改变页面元素,浏览器会延迟整个页面的渲染直到JS被下载解释并执行,所以必须让CSS的链接在JS前面以达到尽可能的并行。 与浏览器支持的并发连接数有关 在HTTP 1.1协议中要求浏览器访问同一host的连接数不得大于2,但事实上当前绝大多数浏览器都违背了这一要求,具体参见:并发连
小端
2018/04/16
2.4K0
vue如何引用外部js_引入外部js文件
在Vue中,通常我们引入一个js插件都是使用npm 方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接,我不想使用npm install xxx 的方式,有什么办法吗?
全栈程序员站长
2022/11/09
13.4K0
Js框架设计之DomReady
一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2、HTML是要通过浏览器解析之后才会转换成为DOM节点 一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM节点)。 当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady. 3、浏
郑小超.
2018/01/24
1.5K0
一篇文章带你搞定JavaScript 性能调优
JavaScript 是单线程运行的,所以在在执行效率上并不是很高,随着用户体验的日益重视,前端性能对用户体验的影响备受关注,但由于性能问题相对复杂,接下来我们来了解下JavaScript如何提高性能;
前端皮皮
2022/08/17
7080
异步加载脚本保持执行顺序
首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错。
菜的黑人牙膏
2019/01/21
1.9K0
爬虫+反爬虫+js代码混淆
vue代码 <template> <el-row style="padding: 15px"> <el-button size="mini">默认按钮</el-button> <el-button type="primary" size="mini">主要按钮</el-button> <el-button type="success" size="mini">成功按钮</el-button> <el-button type="info" size="mini">信息按钮<
李昂君
2021/12/24
2.9K0
爬虫+反爬虫+js代码混淆
自动加载jQuery的Javascript代码示例
当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:
魏杰
2022/12/23
1.1K0
JS异步加载的三种方式
同步模式:又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。
青梅煮码
2023/01/14
3.3K0
JavaScript 常用方法总结
经常使用的 JS 方法,今天记下,以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.userAgent.toLowerCase() isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userA
前朝楚水
2018/04/02
1.3K0
前端 实战项目·动态加载 JS 文件
对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式。
数媒派
2022/12/01
5.5K0
相关推荐
js实用方法记录-js动态加载css、js脚本文件
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验