使用JavaScript动态加载CSS文件

我在一个网站上工作，我需要检查一个远程主机上的CSS文件是否存在，然后加载相同CSS文件的本地副本，如果它不存在。使用JavaScript动态加载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

任何人都可以请提出一个解决方案或替代方法来实现这个？

来源

2012-08-15 Pankaj Parashar

您不允许从网站的服务器复制css。 – 2012-08-15 15:23:28

这似乎是一种XSS预防技术。标题Access-Control-Allow-Origin应该包含对你的域或者'*'的引用，以指向任何地方。 – Rolice 2012-08-15 15:24:45

可能的重复：http://stackoverflow.com/questions/3794128/how-to-check-if-an-external-cross-domain-css-file-is-loaded-using-javascript?rq=1。基本上，您遇到了跨域访问控制策略问题。 – 2012-08-15 15:24:51

你可以使用这篇文章的一些功能：Dynamically loading css file using javascript with callback without jQuery，你可以直接使用该功能。

我希望这将有助于

来源

2012-08-15 15:28:42

XHR由Same Origin Policy有限的 - 你不能从另一个域/协议请求资源，而无需额外的跳铁圈。您必须请求远程服务器设置CORS或根本不使用XHR。

取而代之，您只需生成一个link元素，并观察其加载样式会影响的其他元素的状态或状态。不幸的是，这种行为在浏览器中并没有实现，但幸运的是，有些库可以简化处理。检查出Ensure。

来源

2012-08-15 15:28:51

使用JavaScript动态加载CSS文件

回答

相关问题