JS练习 -- 动态加载JS

文章目录

导读
通过CDN网站获取js的url
url、script.src
XHR加载、script.text
参考资料

导读

日期：2022-1-18

分析网页时，经常遇到一些库未加载的情况，比如想使用axios库，该网站本身未加载，这时候就需要通过js加载。

通过CDN网站获取js的url

这里以axios为例。

https://www.bootcdn.cn/
- https://www.bootcdn.cn/axios
- https://cdn.jsdelivr.net/npm/axios@0.25.0/dist/axios.min.js
https://www.jsdelivr.com/
- https://www.jsdelivr.com/?query=axios
- https://cdn.jsdelivr.net/npm/axios@0.25.0/dist/axios.min.js

url、script.src

function loadJS( url, callback ){var script = document.createElement('script')var fn = callback || function(){};script.type = 'text/javascript';//IEif(script.readyState){script.onreadystatechange = function(){if( script.readyState == 'loaded' || script.readyState == 'complete' ){script.onreadystatechange = null;fn();}};}else{//其他浏览器script.onload = function(){fn();};}script.src = url;document.getElementsByTagName('head')[0].appendChild(script);
}// 测试代码
console.log(typeof axios)
loadJS('https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js', ()=>console.log(typeof axios))

XHR加载、script.text

function loadJS( url, callback ){var fn = callback || function(){};var xhr = new XMLHttpRequest;xhr.open('get',url,true);xhr.onreadystatechange = function(){if( xhr.readyState == 4 ){if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){var script = document.createElement('script');script.type = 'text/javascript';script.text = xhr.responseText;//IEif(script.readyState){script.onreadystatechange = function(){if( script.readyState == 'loaded' || script.readyState == 'complete' ){script.onreadystatechange = null;fn();}};}else{//其他浏览器// axios的onload不会触发？？？script.onload = function(){fn();};script.onerror = function(e){console.log('script.onerror', e)};}document.body.appendChild(script);}}};xhr.send(null);
}// 测试代码
console.log(typeof axios)
loadJS('https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js', ()=>console.log(typeof axios))

参考资料

js怎么动态加载js文件 https://www.cnblogs.com/telwanggs/p/11045773.html
https://blog.csdn.net/Tmraz/article/details/114821997
qq群：夜猫逐梦技术交流裙/953949723

JS练习 -- 动态加载JS相关推荐

html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
js怎么动态加载js文件（JavaScript性能优化篇）
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
js jq 动态加载js文件
1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function() ...
原生js实现动态加载js文件?
一.写在前面今天拼多多笔试题,题目如下: 实现一个动态加载函数function loadScript(src, attrs)返回Promise, 其中 src是脚本地址,attrs是脚本属性. 二. ...
jquery 动态加载js插件
作用描述: 在H5页面直接加载插件,有时可能在js使用到时没有记载完成,如果不进行二次加载及判断,程序可能就此卡壳,无法继续运行.通过jquery动态多次判断加载,保证插件的完整加载及使用. 解决方案 ...
ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...

JS练习 -- 动态加载JS

文章目录

导读

通过CDN网站获取js的url

url、script.src

XHR加载、script.text

参考资料

JS练习 -- 动态加载JS相关推荐

最新文章

热门文章