複数のiframeの読み込みについて

2023/09/05 12:58

このQ&Aのポイント

制限がありながらも、iframeを使用してページを組んでいると問題が発生しました。IE11とchrome34.0で表示がおかしくなり、原因がわかりません。
このページは親ページと子ページが別ドメインで、親ページには制限があります。ページ内リンクを使用しているが、正しくリンクが飛ばず、画像もぼやけて表示されます。
親ページ内に複数のiframeを使用し、子ページの内容を表示しています。ページ内リンクを使用しているが、正しくリンクが飛ばず、一番上にスクロールしない問題が発生しています。

ベストアンサー

複数のiframeの読み込みについて

2014/05/26 20:24

とある事情があり、制限がかなりある中、何とかiframeでやりくりをしていたのですが、下記の通り（コード、画像参照）ページを組んだところ、 IE11、chrome34.0で確認をしたところ、下記の通り表示がおかしくなってしまいました。制限が色々あるため、少しイレギュラーなコードの組み方をしており、どこが原因なのかがわからない状態です。状況などをまとめましたので、お手数おかけいたしますがご教授いただけますでしょうか。 ■■■ページの概要について恐らく下記のコードと添付の画像を見ていただいた方がわかりやすいと思いますが、制限や概要を記述しておきます。・表示させる方のページをA.html（親ページ）、iframe内で読み込むページをB.html（子フレーム）とします。・親ページの方にはかなり使用できるタグなどに制限があり、javascriptが使用できません。文字数にも制限があります（子フレームの方は自由です。）・親ページも子フレームも触れるものの、この2ページは別ドメインです。（下記の例は相対パスで記述しています）・子フレームの内容は、下記の例では内容が少ないですが、実際にはかなり長いページになります。ただ、ページは分けない方向でお願いします。・iframeはスクロールが出ないように高さを調節しています。・ページ内リンクを使用したいのですが、iframe内だけではなく、親ページから見た状態でページの途中に飛ばしたいため、　親ページの方にページ内リンク用のアンカーをつけ、複数のiframeで子フレームの内容を表示させています。・子フレームのコンテンツ毎にiframe表示用のアンカーをつけ、親ページで細かくiframeを分けて表示させています。・（ページ内リンクは親ページの方に記述することも出来ます。）ちなみに過去に次のような記事を見つけましたが、どちらも試すこともできない状態です。 http://okwave.jp/qa/q1105662.html http://okwave.jp/qa/q2938546.html ■■■表示のエラーについて（サーバ上でも、ローカルでも同じような状態です。）・ページを読み込むと、一番上ではなく、一番下のiframeのところで止まります。　（⇒ページが読み込むと同時に一番上に行ってほしいです。）・ページ内リンクを付けていますが、リンクを押しても該当のヶ所に飛ばず、　読み込むように少しページがぶれるのですが、元の位置のままです。・IE11のみですが、リンクで使用している画像がぼやけて表示されます。　（外部CSSで文字の背景に設定しています。） ■■■コードについて ◆A.html（親ページ） ※JSは使用不可です。 ※<body>は触れません。 ※B.htmlのページとは別ドメインです。  <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe>  <a name="linkAa" id="linkAa"></a> <iframe src="B.html#Ba" frameborder="0" width="850" height="580" marginwidth="0" marginheight="0" scrolling="no"></iframe>  <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe>  <a name="linkAb" id="linkAb"></a> <iframe src="B.html#Bb" frameborder="0" width="850" height="595" marginwidth="0" marginheight="0" scrolling="no"></iframe>  <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe>  <a name="linkAc" id="linkAc"></a> <iframe src="B.html#Bc" frameborder="0" width="850" height="565" marginwidth="0" marginheight="0" scrolling="no"></iframe> ◆B.html（子フレーム） ※JSは使用可です。 <div class="pageLink"> <a name="Blink" id="Blink"></a> <ul> <li><a href="A.html#linkAa" target="_top">#linkAaへリンク</a></li> <li><a href="A.html#linkAb" target="_top">#linkAbへリンク</a></li> <li><a href="A.html#linkAc" target="_top">#linkAcへリンク</a></li> </ul> </div> <a name="Ba" id="Ba"></a> <div>Baの内容</div> <a name="Bb" id="Bb"></a> <div>Bbの内容</div> <a name="Bc" id="Bc"></a> <div>Bcの内容</div> 以上です。よろしくお願いいたします。

shiori-3-wgkn
お礼率50% (2/4)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/28 09:28 回答No.4

IEのバグへの対策・A.html内のナビゲーションリンクはiframeを使わない・A.html内の最後のiframeはposition:absoluteでトップに移動させる。の二点でなんとかなりますね。

質問者

お礼 2014/05/28 21:47

昨夜ご回答いただいた「ナビゲーションをfixed」と本日いただいた件について、色々と検証していただき、ありがとうございました。「ナビゲーションをfixed」だと想定していた挙動と異なってしまいました。（これは、こちらのテンプレートの問題です）本日ご回答いただいた件も試した結果、無事ページを読み込んだ後に一番上に移動はしたものの、ナビゲーションは動作しませんでした。 IEのバグということでどうしようもなく今回は断念ですが、ページ内リンクを付けなければIEでも想定している挙動にすることができるのがわかったので、今後活用していく場面が多々出てくると思います。楽天め・・・IEめ・・・というところですが、ORUKA1951様の助言で大変助かりました。丁寧なご回答誠にありがとうございました！

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/27 18:51 回答No.3

＞親ページの方の補足で、文字コードはEUCに限定されており、「DOCTYPE宣言」は出来ない状態です。このあたりは何か影響しますでしょうか？ IEのバグでしょうね。　いっそのこと、B.htmlをひとつだけ呼び出して、スタイルシートでナビゲーションをfixedにしてしまう。それが一番スマートかと

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/27 14:51 回答No.2

そうはならないはず・・HTMLがちゃんと書けていたら [A.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1 ＿＿<p><iframe src="B.html#INDEX"></iframe></p> ＿</div> ＿<div class="section" id="FIRST"> ＿＿<p><iframe src="B.html#FIRST"></iframe></p> ＿</div> ＿<div class="section" id="PREPARED"> ＿＿<p><iframe src="B.html#PREPARED"></iframe></p> ＿</div> ＿<div class="section" id="FIRST_STEP"> ＿＿<p><iframe src="B.html#FIRST_STEP"></iframe></p> ＿</div> ＿<div class="section" id="SAMPLE"> ＿＿<p><iframe src="B.html#SAMPLE"></iframe></p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html> [B.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<title>初めてのウェブページ</title> <style type="text/css" media="screen">  </style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1>初めてのウェブページ</h1> ＿</div> ＿<div class="section" id="FIRST"> ＿＿<h2>はじめに</h2> ＿＿<p> ＿＿＿最初に必要な用語をごく簡単に説明しておきます。それ以外の用語は登場するたびに説明するなり、外部情報へのリンクが指定してあります。＿＿</p> ＿</div> ＿<div class="section" id="PREPARED"> ＿＿<h2>用意するもの</h2> ＿</div> ＿<div class="section" id="FIRST_STEP"> ＿＿<h2>とりあえず作ってみよう</h2> ＿</div> ＿<div class="section" id="SAMPLE"> ＿＿<h2>とりあえず作ってみよう</h2> ＿</div> ＿<div class="nav" id="INDEX"> ＿＿<ol> ＿＿＿<li><a href="A.html#FIRST" target="_parent">最初に</a></li> ＿＿＿<li><a href="A.html#PREPARED" target="_parent">用意するも</a></li> ＿＿＿<li><a href="A.html#FIRST_STEP" target="_parent">WebとHTML</a></li> ＿＿＿<li><a href="A.html#SAMPLE" target="_parent">見本</a> ＿＿</ol> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<p>・・・・</p> ＿</div> </body> </html>

質問者

補足 2014/05/27 17:31

ご丁寧なご回答をありがとうございます。頂いたコードのままページを作成し確認をしたところ、 chromeは正常な状態で動作をしたのですが、IEは変わらず一番下のままでした。（アンカーリンクも飛びませんでした。）確認をしているOSは windows 7 ですが、ブラウザやOSの問題でしょうか？また、いただいたコードをそのまま使用したので今回は関係ないと思いますが、親ページの方の補足で、文字コードはEUCに限定されており、「DOCTYPE宣言」は出来ない状態です。このあたりは何か影響しますでしょうか？お手数おかけいたしますが、もし分かれば是非よろしくお願いいたします。

shockatz
ベストアンサー率80% (153/191)

2014/05/27 14:00 回答No.1

一般的に、仰っている内容はA.html側のドメインでjavascriptを動作させればすぐ解決する問題ばかりです。 B.html側にjsを書いても、コンテナとしてのA.htmlに対しては、「ドメイン間セキュリティ」の制限があり、A.html側のコンテンツは操作できません。で、はなはだ疑問なのですが、以下の記述 ◆A.html（親ページ） ※JSは使用不可です。 ※<body>は触れません。 A.htmlで「JS使用不可」というのが理解できません。通常、JSが動作するか否かは単純にブラウザ側の問題なので、企業内システムでの運用制限などで、明示的にjavascriptを動作しないようにしている、という意味でしょうか？（その割にはiframe内部のB.htmlでjavascriptが動くような記述があるのですが）自分思いますに、おそらくECサイト構築サービスやCMS等の利用で、<head></head>内部へのjavascript記述や、<body>タグへのonLoadイベントハンドラ記述ができないので、javascriptの利用を諦めておられるのではないかと思います。 javascriptは<head>内だけでなく、<body>内にも普通書けるので、jQueryなども普通に利用できますよ。記入位置は</body>直前でいいと思います。

質問者

お礼 2014/05/27 17:23

ご回答いただきありがとうございます。「A.html側のドメインでjavascriptを動作させればすぐ解決する」というのは私も常々思っております。 javascriptを<body>内に記述しても動作するというのは存じていたのですが、やはり「制限」があり<body>内に記述もできないという状況です。必要無いと思い記述をしておりませんでしたが、使用しているシステムは楽天ショップの「楽天RMS」です。親フレームの方は楽天RMS内に記述、子フレームの方は「楽天GOLD」というサービスを使いFTPでサーバに直接アップをするという方法です。他店の方もかなり苦労をされているようで、楽天RMS内は完全にJS不可のため、コンテンツを楽天GOLDの方で制作し、楽天RMSでiframeで呼び出すという手法をとっています。すべてのページを楽天GOLDで制作すれば良いのではと思われるかもしれませんが、アクセス解析や容量など諸々の問題があり実現は難しいです。今後楽天の対応が改善されることを願うのですが・・・ご回答ありがとうございました。

複数のiframeの読み込みについて

複数のiframeの読み込みについて