iframeの中身が表示されないときは呼び出し先URLが正しいか確認しよう

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、iframeの中身が表示されないときは呼び出し先URLが正しいか確認しようという話をします。

先日、新規のお客様から「ホームページにインラインフレームで表示していた画面が表示されなくなってしまった」というご相談をいただきました。

お話を伺うと「特に何もしていない」「いつ症状が発生したかはちょっとわからない」とのこと。

呼び出し元のページは正常に表示されており、見たところ特に不具合はなさそうです。
となると問題があるのは呼び出し先のページである可能性が高いですね。

取り急ぎChromeのデベロッパツールで呼び出し元ページのソースコードを見てみると、下記のようになっています。

<iframe src="http://..." scrolling="no" marginheight="0" marginwidth="0" width="1000" height="560" frameborder="0"></iframe>

「marginheight」や「marginwidth」といった現在非推奨の記述についてはさておき。。。

呼び出し先URLに直接アクセスしてみると「https://…」とリダイレクトされて正常に表示されます。
そこで、Chromeのデベロッパツール上で呼び出し先のURLを「https://」で始まるURLに書き換えると、iframeの中に正しくページが表示されました。

iframeの中身が表示されなくなってしまった原因は、単純にURLの記述ミスということになります。
「src=”https://〜」と記述されていなければならないところを「src=”http://〜」と記述してしまっていたため正しく呼び出せていなかった、ということです。

ただ、今回のケースについては、元々は「http://」で正しく表示されていたものが、呼び出し先ページの仕様変更で表示されなくなったというものなので、正確には記述ミスというよりは変更漏れという種類のミスですね。

iframeに限らず、呼び出し元と呼び出し先があるファイル、親子関係にあるページなど、しっかりと管理していないと起こりがちなミスかと思います。
ファイル内にコメントを記述しておいたり、表を作って管理するなど、ミスを減らす工夫をしたいですね。

さて、今回は、iframeの中身が表示されないときは呼び出し先URLが正しいか確認しようという話をしました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。