使用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 Developer工具中檢查時）

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

您可以使用本文的一些功能： 使用帶有回調的javascript動態加載css文件而不使用jQuery ，您可以直接使用該功能。

我希望這會有所幫助

Answer 2

XHR受“ 同源起源策略”的限制-您不能從另一個域/協議中請求資源，而不會產生額外的麻煩。 您必須請求遠程服務器設置CORS，或者根本不使用XHR。

取而代之的是，您可以生成一個link元素，並觀察其狀態或加載樣式可能會影響的其他元素的狀態。 不幸的是，這種行為並不是跨瀏覽器的典型表現，但是幸運的是，有一些庫可以簡化處理過程。 退房確保 。