2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JavaScript 根据需要动态加载脚本并设置自定义参数

时间:03-31来源:作者:点击数:40

问题背景

在html文件里,加载javascript脚本,可以通过添加<script src="js脚本"></script>的方法来加载。

但是,有时候想要根据需要动态加载不同的脚本,或者设置不同的参数,需要怎么做呢?

解决方法

可以利用DOM document的接口来实现。具体步骤:

  • 1). 创建script元素
    let scriptElement = document.createElement('script')
  • 2). 设置script的脚本
    scriptElement.src = "js脚本路径"
  • 3). 设置脚本的参数
    scriptElement.setAttribute(key, value)
  • 4). 添加到document树上
    ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( scriptElement );

注意

  • 1). 设置Script的自定义参数使用的是setAttribute方法,而不是直接scriptElement[key] = value
  • 2). 如果要异步加载,需要设置scriptElement.async = true

HTMLScriptElement 参考

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

完整示例(TypeScript)

  • async function loadJsAsync(src:string, async:boolean=false, options?:any) {
  • return new Promise<void>((resolve, reject) => {
  • const script = document.createElement('script');
  • script.src = src;
  • script.async = async;
  • if(options) {
  • for(const key in options) {
  • script.setAttribute(key, options[key]);
  • }
  • }
  • let onload = () => {
  • script.removeEventListener('load', onload);
  • // 非异步加载的话,需要等待onload返回
  • if(!async) {
  • resolve();
  • }
  • };
  • script.addEventListener('load', onload);
  • script.addEventListener('error', (err) => {
  • console.error(err);
  • reject(new Error(`Failed to load ${src}`));
  • });
  • ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild.appendChild(script);
  • // 异步加载直接返回
  • if(async){
  • resolve();
  • }
  • });
  • }

使用示例

  • loadJsAsync(url, true, attributes);

gist地址

https://gist.github.com/zhangzhibin/9bfc7debf08a5300c0101e1c1f19a904

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门