时间戳

首页 > 解决方案 > 如何有条件地加载文件？

javascript - 如何有条件地加载文件？

问题描述

有人可以建议我有条件地加载 css 或 javascript 文件的方法，即仅当 url 可访问时？

例如在我的页面上，我有以下文件：

<html>
...
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<script type="text/javascript" src="https://services.test/js/a.js"></script>
...
</html>

有没有办法检查是否https://service.test/css/a.css可以访问，如果是，则加载此资源（与 相同https://services.test/js/a.js）？

标签： javascriptjquery

解决方案

你可以试试这样的。但它只适用于 head 部分的样式表。

<html>
<link rel="stylesheet" type="text/css" href="https://service.test/css/a.css"/>
<body>

</body>

<script>
// you will have to manuall define the pairs (keys are stylesheets and values are scripts you want to load)
const pairs = {
    "https://service.test/css/a.css": "https://services.test/js/a.js"
}

let styles = document.querySelectorAll("link[rel='stylesheet'][type='text/css'][href]");

styles.forEach(s => {
  if(pairs[s.href]){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = pairs[s.href];    
    document.getElementsByTagName('head')[0].appendChild(script);
  }
});
</script>
</html>

推荐阅读