2009-02-15 91 views
434

我有以下元素:在<script src =「http:// ...」>中用//代替http://是否有效?

<script type="text/javascript" src="https://cdn.example.com/js_file.js"></script> 

在這種情況下,該網站是HTTPS,但該網站也可能只是HTTP。 (JS文件位於另一個域)。我想知道,如果它是有效的做到爲方便起見,以下內容:

<script type="text/javascript" src="//cdn.example.com/js_file.js"></script> 

我想知道如果它是有效的去除http:https:

它似乎在我測試過的任何地方都能正常工作,但是在任何情況下它不起作用嗎?

+2

可以將「它似乎在任何地方工作」推廣到圖像,iframes,link-rels等等?如果是這樣,這是有趣的東西。 – 12345 2009-02-15 01:10:31

+0

是的,它應該可以在任何需要URI的地方工作:圖片,鏈接等等。使用它可能很少見,但它非常有效。 – Jeff 2009-02-15 01:34:45

回答

369

沒有方案(http:或https :)的相對URL有效,每RFC 3986: "Uniform Resource Identifier (URI): Generic Syntax", Section 4.2。如果客戶端扼殺它,那麼這是客戶端的錯,因爲它們不符合RFC中指定的URI語法。

你的例子是有效的,應該工作。我在交通繁忙的網站上使用了這種相對URL方法,並且沒有任何投訴。此外,我們在Firefox,Safari,IE6,IE7和Opera中測試我們的網站。這些瀏覽器都瞭解URL格式。

+0

這似乎不是一個相對的URL在問題中。它看起來像是缺少協議的絕對URL。 – Chuck 2009-02-15 01:00:30

+0

它確實是相對的。看看RFC 3986,第4部分。 – Jeff 2009-02-15 01:07:10

+0

我同意它的相對,// == /相對開始於/絕對不。因此cdn.example.com/js_file.js是絕對的,但是/cdn.example.com/js_file.js或//cdn.example.com/js_file.js是相對的。 – 2009-02-15 01:12:33

16

離開協議是完全有效的。這個URL規範多年來一直很清楚,我還沒有找到一個不理解它的瀏覽器。我不知道爲什麼這種技術不被人們更好地瞭解;它是跨越HTTP/HTTPS邊界的棘手問題的完美解決方案。更多這裏:Http-https transitions and relative URLs

22

我在這裏重複答案Hidden features of HTML

使用協議無關的絕對 路徑:

<img src="//domain.com/img/logo.png"/> 

如果瀏覽器通過HTTPS瀏覽的頁面中 SSL,那麼」我會請求 該資產與https協議, ,否則它會用HTTP請求它。

這防止了可怕的「此頁 包含安全和非安全項目 」在IE瀏覽器的錯誤信息,保持 相同的協議中 所有資產的請求。

警告:當在<link>或 @import用於樣式表所使用的,IE7和IE8 download the file twice。然而,所有其他 用途都很好。

2

是的,這是在RFC 3986記錄,第5.2節:

(編輯:哎呀,我的RFC參考已經過時)。

145

這是保證在任何主流瀏覽器(我不考慮瀏覽器低於0.05%的市場份額考慮)工作。哎呀,它適用於Internet Explorer 3.0。

RFC 3986限定URI作爲由以下幾個部分組成:

 foo://example.com:8042/over/there?name=ferret#nose 
    \_/ \______________/\_________/ \_________/ \__/ 
     |   |   |   |  | 
    scheme  authority  path  query fragment 

當定義相對URI(Section 5.2),則可以省略任何那些部分,總是從左邊開始。在僞代碼,它看起來像這樣:

result = "" 

    if defined(scheme) then 
    append scheme to result; 
    append ":" to result; 
    endif; 

    if defined(authority) then 
    append "//" to result; 
    append authority to result; 
    endif; 

    append path to result; 

    if defined(query) then 
    append "?" to result; 
    append query to result; 
    endif; 

    if defined(fragment) then 
    append "#" to result; 
    append fragment to result; 
    endif; 

    return result; 

你所描述的URI是一個方案,更小的相對URI。

75

有沒有任何情況下,它不工作?

如果父頁面從file://加載,那麼它可能無法正常工作(它會嘗試獲得file://cdn.example.com/js_file.js,當然,你可以提供本地以及)。

3

繼gnud的參考,RFC 3986第5.2節說:

如果方案分量被定義,表示參考 開始於方案名,則參考被解釋爲 絕對的URI,我們完成了。 否則,參考URI的方案 從基URI的方案組件繼承。

所以//是正確的:-)

2

這的確是正確的,因爲其他的答案已經指出。不過,你應該注意到,一些網絡爬蟲將通過在你的服務器上請求它們來爲這些爬蟲設置404s,就像本地URL一樣。 (他們無視雙斜線並將其視​​爲單斜線)。

您可能想要在您的網絡服務器上設置一個規則來捕獲這些規則並重定向它們。

例如,Nginx的,你會加入類似:

location ~* /(?<redirect_domain>((([a-z]|[0-9]|\-)+)\.)+([a-z])+)/(?<redirect_path>.*) { 
    return 301 $scheme:/$redirect_domain/$redirect_path; 
} 

做不過請注意,如果您使用您的URI時期,你需要增加特異性或將結束將這些頁面重定向到不存在的域。

此外,這是一個相當大規模的正則表達式來運行每個查詢 - 在我看來,它是值得懲罰不合規的瀏覽器與404s超過(略)在大多數兼容瀏覽器的性能影響。

1

我上html5-boilerplate看到的模式是:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 

它順利運行於不同的方案,如:httphttpsfile

2

當使用//somedomain.com作爲JS文件的引用時,我們在日誌中看到404錯誤。

造成的404出來找這樣的引用: REF:

<script src="//somedomain.com/somescript.js" /> 

404請求:

http://mydomain.com//somedomain.com/somescript.js 

有了這些經常出在我們的網絡服務器日誌時,它是安全的要說:所有的瀏覽器和機器人不要榮譽RFC 3986第4.2節。最安全的選擇是儘可能包括協議。

5

有沒有任何情況下,它不工作?

只是在混合使用中,如果您正在本地服務器上開發,它可能無法正常工作。您需要指定一個方案,否則瀏覽器可能會假設爲src="file://cdn.example.com/js_file.js",由於您不是在本地託管此資源,因此它會中斷。

Microsoft Internet Explorer中似乎是這個特別敏感,看到了這個問題:Not able to load jQuery in Internet Explorer on localhost (WAMP)

你可能總是試圖找到與必要的修改最少的所有環境工作的解決方案。

通過HTML5Boilerplate使用的解決方案是,當資源沒有正確加載回退,但只有當你整合檢查工作:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<!-- If jQuery is not defined, something went wrong and we'll load the local file --> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 

UPDATE:HTML5Boilerplate現在決定棄用協議後使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js相對URL,請參見[這裏] [3]。

相關問題