iframeの使い方について

ECサイトを展開中です。

最上のディレクトリである index.html ファイルの中に、
他商品ページの最下部へ出力する共通のオススメ商品を表示させたいです。この際に、phpは使えないサーバーを利用しているため、最上のディレクトリである index.html ファイルには他htmlファイルでオススメ商品だけを表示したページを作成して<iframe>タグでそれぞれ呼び出して、今後オススメ商品が変わっても管理しやすいようにしようかと考えています。

ただ、このやり方だと最上のディレクトリである index.html ファイルに<iframe>タグを6〜9つ記述することになってしまい、ユーザーがページを読み込んだ際に、表示スピードも遅くなってしまうのではと思ってます。

当方、jQueryは利用出来ますがJavascriptは初心者です。
このようなケースだと、どんな方法で記述して運用していくのがベストでしょうか？

皆さんの知恵をお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

jQuery なら load で簡単に代替できると思います。

HTML でオススメ商品を表示する箇所に次のようにからの div を書いておいて

lang
1<div id="recommend"></div>

javascript で次のように表示させたい html を load で読み込みます。

lang
1$(function(){
2    $('#recommend').load('recommend.html');
3})

このとき recommend.html は <html> や <head> や <body> を含まない HTML の断片である必要があります。

投稿2015/05/13 09:22

ngyuki

総合スコア4514

YuichiKataoka

2015/05/19 14:46

お返事遅くなってしまい、申し訳ありませんでした。まだ動作確認出来ていないのですが確認させて頂きたい点が2点あります。・スマホでも表示は問題ないでしょうか？（iframeだとサイズの指定がcssで設定しないと効かなかったため）・jsファイルに以下の様に記載した場合 $(function(){ $('#recommend').load('recommend.html'); }) 読み込むhtmlファイルが「recommend.html」になっていますがjsファイルから見た相対パスでhtmlファイルを書けば良いでしょうか？

ngyuki

2015/05/19 15:48

>・スマホでも表示は問題ないでしょうか？単に Ajax で div の中身に html を突っ込んでいるだけなので表示出来ないわけがありません。 > jsファイルから見た相対パスでhtmlファイルを書けば良いでしょうか？違います、その js ファイルを読んでいる html ファイルから見た相対です。

行動規範の内容に同意します

表示速度に関しては、iframeだとcss/script/imgとの読み込み順序はブラウザによって違った気がするので、体感で考えると遅くなる可能性は大いにあります。

（たぶんFirefox?）script,cssが読み込み終わって、img,iframeはhtmlソース上の順に読み込んでくれる
（きっとChrome? ）script,cssが読み込み終わったあと、imgが読み込み終わってからiframeの順に読み込まれる

※間違ってたらすみません

SSIは使える環境でしょうか？
もし使えるのであれば、includeの方がiframeより手っ取りばやく実装できると思います。
※サーバーの設定次第では使えないので、使えない場合はスルーしてください。

SSI参考ページ
http://lab.gpol.co.jp/tsubo/2011/12/ssiserver-side-include.php

Dreamweaverをお使いでしょうか？
もし使っているようであればテンプレート機能と言うものも存在します。
※共通部分に設定してしまえば問題ないですが、使い勝手はよろしくないかも？
http://www.oyakonews.com/oyanews/homep/UPDATE/UPD_05.html

SEOの観点での意見とかもあるかと思いますが、今回はあえてスルーしておきます！

投稿2015/05/13 05:25