问答

html如何 同步 动态 引入js文件?

作者:admin 2021-05-06 我要评论

script src="./config.js"/scriptscript // config.js 暴露一个全局 config 对象 console.log(config)/script 因为浏览器缓存问题, 所以想动态引入 config 让浏...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<script src="./config.js"></script>

<script>
    // config.js 暴露一个全局 config 对象
    console.log(config)
</script>

因为浏览器缓存问题, 所以想动态引入 config 让浏览器不走缓存

但问题是 document.writedocument.createElement 加载的js都是 异步加载 的, 这样后面的引用会报错

请问如何让他 同步动态 加载呢? 除了用 script 标签的加载完成事件来处理 callback

###

你错了。
document.write 是同步的.

当时一般来说这方案不科学。可以用其他的方案

  1. 版本号。杨周龙的方案
  2. 设置不缓存。lansun的方案
  3. requirejs。类似于三楼说的方案把。只不过是兼容性的方案,异步加载资源,资源满足才执行
  4. 改造成不相互依赖的。自然也就没有这个问题了。
<script>
    console.log(1, typeof window.Vue)
</script>
<script src="/uploads/allimg/210506/0Z10C408-1.jpg"></script>
<script>
    console.log(2, typeof window.Vue)
</script>

<script>
    console.log(3, typeof window.jQuery)
</script>
<script>
    document.write('<script src="/uploads/allimg/210506/0Z10B0N-2.jpg"><\/script>')
</script>
<script>
    console.log(4, typeof window.jQuery)
</script>

image.png

###

我一般是这么做的

loadConfig.js

// ====页面动态加载config.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
oscript.src = '*****/config.js'
head.insertBefore(oscript, head.firstChild)

// 获取config.js
function getConfig() {
  var config
  try {
    config = getConfig()
    if (!config && document.readyState !== 'complete') {
      alert('config.js还没加载好,请稍后再试!')
      return
    }
    return config
  } catch (err) {
    console.log('加载config.js失败')
  }
}
export { getConfig }

其他页面使用

import { getConfig } from '**/loadConfig.js'
...
....
const config = getConfig()
###

服务端设置 Response Header

Cache-Control: no-store
###

1.要么像楼上修改config.js response 返回headers

2.在加载路径上面加get参数

<script src="./config.js?=xxxx"></script>

3.改一下编程方式,先创建一个confg全局变量,订阅这个变量加载数据完成触发后面的程序初始化等,可以通过proxy代理方式实现

###

https://developer.mozilla.org...

在type="module"的script标签里可以使用require,就能同步动态引入js文件了

###

上面都说了好几个思路了,再补充一个,

document.createElement,创建标签时设置一下 onload 事件的回调。然后再 onload 里面取 config。

这样,再 createElement 时就可以添加随机参数的形式来避免缓存了。

###

其实你说的我有点没太明白,就是document.createElement异步加载,再调用的时候会出错 , 正常情况下不会出错的才是吧, 是不是你在异步加载的时候,脚本加载的顺序有问题? 如果是加载顺序的问题 你可以看看这篇文章 https://blog.csdn.net/csder_x...

同时不建议同步加载非必要js脚本,这样会拖慢页面的加载速度

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • html如何 同步 动态 引入js文件?

    html如何 同步 动态 引入js文件?

  • vue 地图,支持3D模式,支持自定义主题

    vue 地图,支持3D模式,支持自定义主题

  • 如何获取选取文本的开始位置和结束位置

    如何获取选取文本的开始位置和结束位置

  • php-fpm 502错误

    php-fpm 502错误

腾讯云代理商
海外云服务器