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，你可以直接使用这个功能。

我希望这会有所帮助

Answer 2

XHR受Same Origin Policy的限制 - 您无法在不跳过额外的环路的情况下从其他域/协议请求资源。您必须要求远程服务器设置CORS或者根本不使用XHR。

您可以只生成一个link元素，并观察其加载样式会影响的其他元素的状态或状态，而不是它。不幸的是，这种行为并不是跨浏览器的标准化，但幸运的是，有一些库可以简化处理它。查看Ensure。

使用JavaScript动态加载CSS文件

2 个答案: