http、httpsを省略してCSSやJavascriptを簡単に読み込む

久しぶりにHTMLやらJavascriptを触っていて知ったこと。全く知りませんでした。
これは便利で、早速、色々なところのコードを書き換えました。

HTTPとHTTPSイチイチ切り替えるの面倒

HTTPとHTTPSのプロトコル(RFC的にはスキーム)が混在したウェブサイトがあります。

例えば、通常ページはHTTPを利用して表示していて、問い合わせページなどの保護された通信で情報を伝送したいときにはHTTPSを利用して表示します。大抵の場合、ページデザインは通常ページから継承されているのでHTMLコードも使い回し(テンプレート化等がされていたらば、それらの使い回し)になります。そこで問題なのは、CSS、Javascriptなど外部からURIを指定してリソースの読み込みを行っている場合です。

<script src="http://hogehoge.co.jp/demo.js">

こんなコードをそのままHTTPSを利用したページのHTMLに記載するとブラウザによっては警告が表示されます。もしくはブラウザの設定によっては読み込まれないかもしれません。

一番良い方法は、スキームが切り替わっても自動的に追従してくれる記述法なのですが、存在しないモノと思い込んでました。ですが、実は存在していました。気がついたのはGoogle Tag Managerのコード。こんな記述があります。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=xxx-xxxxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

ん!?src=”// という記述方法は大丈夫なのか?もし、可能なら凄く便利!!

調べてみました

まとめ

  • http、httpsは記載を省略できる
  • 省略したときは、現在ブラウザが利用しているスキームが補完される
  • RFC3986にも書かれているvalidな方法
  • 少しだけコード量が少なくなる
    • ページ読み込みスピードに貢献
  • HTMLやCSSにおいて、どんな外部読み込みも省略できる
    • Javascript内ではどうなる?
  • IE7/8では、同じリソースを2回読み込んでしまうらしい
    • 本当のところどうなの?3年前の情報
    • 今のところ、書き換えてみたこのブログでは事実は確認できない
タイトルとURLをコピーしました