1. ホーム
  2. html

[解決済み] url/src/href属性に2つのスラッシュがある [重複] [重複

2022-04-26 07:14:26

質問

<ブロッククオート

重複の可能性があります。

スラッシュ2つで始まるURI ...どのように動作するのですか?

現在のページのものを保持するためにプロトコル(スキーム)を省略した絶対的URL

scriptタグとlinkタグの//の省略形? 誰か見たこと/使ったことある?

のソースを見ていたら HTML5 リセット に気づいたとき 次の行 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

なぜURLの先頭にスラッシュが2つあるのですか?これは http:// ?

解決方法は?

2つのスラッシュは、「現在のページを読み込むために使用されているプロトコルを使用して、参照されているリソースを要求する」ことを表す一般的な省略形です。

プロトコル相対 URL として最もよく知られているこの URL は、この例の JS ファイルのような要素が、(1) と (2) のどちらからでも提供または要求できる場合に特に有用です。 http または https コンテキストを使用します。プロトコル相対 URL を使用することで、以下のような実装を回避することができます。

if (window.location.protocol === 'http:') {
    myResourceUrl = 'http://example.com/my-resource.js';
} else {
    myResourceUrl = 'https://example.com/my-resource.js';
}

のロジックをコードベース全体に適用することができます(勿論、サーバーが example.com の両方を通してコンテンツを提供することができます。 httphttps ).

実際の顕著な例として、Magento 1.X E-Commerce エンジンがあります。パフォーマンス上の理由から、カテゴリと商品ページではプレーンな http をデフォルトで使用し、チェックアウトは https を有効にします。

一部のリソース(サイトのヘッダーにある宣伝用バナーなど)が非プロトコル相対URLで参照されている場合(つまり http://example.com/banner.jpg に到達した顧客は https を有効にしたチェックアウトは、かなり不親切な表示で迎えられます。

このページには安全でない要素があります。

これは、ビジネスにとって必ずしも良いことではないと推測できます。

もし、前述のリソースが //example.com/banner.jpg しかし、http の商品/カテゴリページと https を有効にしたチェックアウトフローの両方において、ブラウザは適切なプロトコルで読み込みを行います。

tl;dr: http/https が混在する可能性が少しでもある場合、リソースを参照するためにダブルスラッシュ/プロトコル相対 URL を使用してください - ホストが http と https の両方をサポートしていると仮定しています。