*

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

おすすめトピックス

関連記事

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

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

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

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
キャッシュトレイ
三菱東京UFJ銀行でもコンビニATM手数料を無料にする事が可能です(条件有り)

セブンイレブンやローソンなどに設置してあるコンビニ ATM は

サングラス
車を運転中に朝陽が眩しくて信号が見えないのでサングラスで対策した

先日車を運転中にヒヤリとする出来事がありました。それは信号に気が付かな

ニーアオートマタのPC版をGeforce GTX960でプレイした感想

2017年3月18日より発売されたスクエアエニックス(開発はプ

Excelでシートを新規ブックにコピーする方法

Excel で既に出来上がったシートを新しい Excel ファ

アニメーションgifを手軽に圧縮してサイズを落とすウェブツール「Online GIF optimizer」

インターネットの速度がここまで発達して速くなってもアニメーション gi

→もっと見る