javascript - 使用 JavaScript 动态加载 CSS 文件

Question

我在一个网站上工作，我需要检查远程主机上的 CSS 文件是否存在，然后加载同一 CSS 文件的本地副本(如果不存在)。

我正在处理的代码，

<script>
function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
function AddLocalCss(){ document.write('<link rel="stylesheet" type="text/css"  href="css/html5-reset.min.css">') }
</script>
<script>!UrlExists('http://meyerweb.com/eric/tools/css/reset/reset.css') && AddLocalCss();</script>

但这会引发错误，(在 Chrome 开发者工具中检查时)

XMLHttpRequest cannot load http://meyerweb.com/eric/tools/css/reset/reset.css. Origin http://example.com is not allowed by Access-Control-Allow-Origin.
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 

任何人都可以提出解决方案或解决方法来实现这一目标吗？

Answer 1

您可以使用这篇文章的一些功能:Dynamically loading css file using javascript with callback without jQuery , 你可以直接使用那个函数。

希望对你有帮助