質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

iframeの使い方について

解決済

回答 2

投稿

  • 評価
  • クリップ 6
  • VIEW 3,011

YuichiKataoka

score 216

ECサイトを展開中です。

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

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

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

皆さんの知恵をお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

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

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

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

$(function(){
    $('#recommend').load('recommend.html');
})

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/19 23:46

    お返事遅くなってしまい、申し訳ありませんでした。まだ動作確認出来ていないのですが確認させて頂きたい点が2点あります。

    ・スマホでも表示は問題ないでしょうか?(iframeだとサイズの指定がcssで設定しないと効かなかったため)

    ・jsファイルに以下の様に記載した場合

    $(function(){
    $('#recommend').load('recommend.html');
    })

    読み込むhtmlファイルが「recommend.html」になっていますがjsファイルから見た相対パスでhtmlファイルを書けば良いでしょうか?

    キャンセル

  • 2015/05/20 00:48

    >・スマホでも表示は問題ないでしょうか?

    単に Ajax で div の中身に html を突っ込んでいるだけなので表示出来ないわけがありません。

    > jsファイルから見た相対パスでhtmlファイルを書けば良いでしょうか?

    違います、その js ファイルを読んでいる html ファイルから見た相対です。

    キャンセル

+2

表示速度に関しては、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の観点での意見とかもあるかと思いますが、今回はあえてスルーしておきます!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる