包括CDN中的庫和本地瀏覽

Question

如果從CDN加載jQuery與...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/...

...則如果網站為HTTPS（被Blocked loading mixed active content "http://ajax.googleapis.com/ajax/... ），則該網站將不被接受。

---

解決方案似乎是：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/...

實際上，如果網站是HTTP或HTTPS，它將正常工作。 但是，在本地處理文件時 （即瀏覽我的硬盤上的文件），則jQuery不會加載此解決方案。

---

這對我很重要，下載我的GitHub項目的人將能夠在本地對其進行測試。

如何在CDN中正確包含jQuery，並能夠在本地瀏覽HTML文件？

Answer 1

通常，使用file:// URL測試網頁不是一個好主意，我也不會支持它。 相反，使用本地Web服務器進行測試更有意義。

但是，如果您打算支持它，則需要對location.protocol進行檢查：

<script>
(function() {
    var protocol = location.protocol === "file:" ? "http:" : location.protocol;
    document.write('<script src="' + protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>');
})();
</script>

或者，如果您正在處理XHTML頁面（或者只是不喜歡document.write ）：

<script>
(function() {
    var protocol = location.protocol === "file:" ? "http:" : location.protocol;
    var script = document.createElement('script');
    script.src = protocol + '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
    document.getElementsByTagName("script")[0].parentNode.appendChild(script);
})();
</script>

使用該頁面的協議（ http: https:什么的），如果它不是file: ，並使用http:如果是file: 。

Answer 2

我一直嘗試使用HTTPS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/...

似乎有效：

1. 從HTML頁面的本地瀏覽（ file:// ）

2. 從http瀏覽HTML頁面

3. 通過https瀏覽HTML頁面

Answer 3

在HTML5 Boilerplate中，在CDN腳本之后添加：

<script>window.jQuery || document.write('<script src="/path/to/local/jquery.js"><\/script>')</script>