[解決済み] url/src/href属性に2つのスラッシュがある [重複] [重複
質問
重複の可能性があります。
スラッシュ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
の両方を通してコンテンツを提供することができます。
http
と
https
).
実際の顕著な例として、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 の両方をサポートしていると仮定しています。
関連
-
document.forms 使用方法
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] CSSでimgタグのsrc属性に相当するものを設定することは可能でしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] <script src="http://..."> の中で、http:// を // に置き換えることは有効でしょうか?
-
[解決済み】http:// のリンクを全て // に変更することは可能ですか?