*

https通信下でjavascriptが動かない場合の対処法

公開日: : ノウハウ

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う https でその他のページは標準の http という場合などです。

その場合 http 通信下では javascript や jquery が動くのに、https 通信下のページでは動かないという事態になります。ヘッダータグ内のスクリプトタグで

<script type="text/javascript" src="http://test.jp/example.js"></script>

という記述をしている場合、https のページになっても http で javascript が読み込まれる事になります。つまり安全なページから安全ではないものを読み込もうとしているという事で、これがブラウザによってはブロックされてしまうのが原因です。

どう対処すれば良いか?

例えば google から提供されているライブラリを例とすると

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

これを

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

こうすれば良いのです。

javascript に限らず css、画像の URL は http 部分を省略できるのです。これでページが http の時は http で読み込まれますし、https の時は https で自動で読み込まれます。その結果、http でも https でも javascript が動くようになります。

自分のサーバーに置く javascript はもちろん相対パス(/js/test.js など)で書けば良いのですが google の外部のライブラリを使う場合、絶対パスで書いてしまう場合があるでしょう。その場合 https で動かなくて困る事になります。

http 部分を省略する事で万事解決するわけです。

  • Pocket

おすすめトピックス

関連記事

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
IoT時代に必要なスキルを徹底分析、必要な3つの事とは?

IoT と聞いて何を思い浮かべるでしょうか。スマートスピーカー

Photoshopでアルファベットが大文字しか打てない時に確認する事

Photohsop で作業中ある異変に気が付きました。それはア

松本市のクレープ専門店「クレープ工房」モチモチ食感がくせになる

長野県松本市にクレープ専門店の「クレープ工房」があります。クレ

中野市のうどん専門店「田りた麺之助」で美味しさに衝撃を受けた

長野県に行ったら食べたいものと想像するのはやはり信州そばではな

志賀高原の池めぐりコースをトレッキングする時の駐車場や帰りのバスについて

大自然の山々や湿原を散策するのが好きで長野県の志賀高原へ行って

→もっと見る