dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：shiori-3-wgkn
  • 質問日時：
  • 回答数：4件

とある事情があり、制限がかなりある中、何とかiframeでやりくりをしていたのですが、
下記の通り（コード、画像参照）ページを組んだところ、
IE11、chrome34.0で確認をしたところ、下記の通り表示がおかしくなってしまいました。
制限が色々あるため、少しイレギュラーなコードの組み方をしており、どこが原因なのかがわからない状態です。

状況などをまとめましたので、お手数おかけいたしますがご教授いただけますでしょうか。



■■■ページの概要について

恐らく下記のコードと添付の画像を見ていただいた方がわかりやすいと思いますが、制限や概要を記述しておきます。

・表示させる方のページをA.html（親ページ）、iframe内で読み込むページをB.html（子フレーム）とします。
・親ページの方にはかなり使用できるタグなどに制限があり、javascriptが使用できません。文字数にも制限があります（子フレームの方は自由です。）
・親ページも子フレームも触れるものの、この2ページは別ドメインです。（下記の例は相対パスで記述しています）
・子フレームの内容は、下記の例では内容が少ないですが、実際にはかなり長いページになります。ただ、ページは分けない方向でお願いします。
・iframeはスクロールが出ないように高さを調節しています。
・ページ内リンクを使用したいのですが、iframe内だけではなく、親ページから見た状態でページの途中に飛ばしたいため、
　親ページの方にページ内リンク用のアンカーをつけ、複数のiframeで子フレームの内容を表示させています。
・子フレームのコンテンツ毎にiframe表示用のアンカーをつけ、親ページで細かくiframeを分けて表示させています。
・（ページ内リンクは親ページの方に記述することも出来ます。）

ちなみに過去に次のような記事を見つけましたが、どちらも試すこともできない状態です。
http://oshiete.goo.ne.jp/qa/1105662.html
http://oshiete.goo.ne.jp/qa/2938546.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>

<!--ここから#Baの内容-->
<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>

<!--ここから#Bbの内容-->
<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>

<!--ここから#Bcの内容-->
<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>


以上です。
よろしくお願いいたします。

「複数のiframeの読み込みについて」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

IEのバグへの対策


・A.html内のナビゲーションリンクはiframeを使わない
・A.html内の最後のiframeはposition:absoluteでトップに移動させる。
の二点でなんとかなりますね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

昨夜ご回答いただいた「ナビゲーションをfixed」と本日いただいた件について、
色々と検証していただき、ありがとうございました。

「ナビゲーションをfixed」だと想定していた挙動と異なってしまいました。（これは、こちらのテンプレートの問題です）

本日ご回答いただいた件も試した結果、
無事ページを読み込んだ後に一番上に移動はしたものの、ナビゲーションは動作しませんでした。

IEのバグということでどうしようもなく今回は断念ですが、
ページ内リンクを付けなければIEでも想定している挙動にすることができるのがわかったので、
今後活用していく場面が多々出てくると思います。

楽天め・・・IEめ・・・というところですが、ORUKA1951様の助言で大変助かりました。
丁寧なご回答誠にありがとうございました！

通報する
お礼日時：2014/05/28 21:47

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞親ページの方の補足で、文字コードはEUCに限定されており、「DOCTYPE宣言」は出来ない状態です。


このあたりは何か影響しますでしょうか？

IEのバグでしょうね。

　いっそのこと、B.htmlをひとつだけ呼び出して、スタイルシートでナビゲーションをfixedにしてしまう。それが一番スマートかと
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

そうはならないはず・・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">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.header iframe{height:60px;oveflow:hidden;}
div.section{min-height:400px;position:relative;}

div.header h1{display:none;}
iframe{
border:none;
width:100%;
height:400px;
}
-->
＿</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">
<!--
div.header{padding-top:40px;}
div.section{width:100%;min-height:400px;position:relative;}
div.nav{position:absolute;top:0;text-align:center;width:100%;}
div.nav ol{list-style:none;margin:0;padding:0;line-height:40px;}
div.nav ol li{width:20%;position:relative;display:inline-block;}
div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;}
div.nav ol li a[href="A.html#FIRST"]{background-color:yellow;}
div.nav ol li a[href="A.html#PREPARED"]{background-color:aqua;}
div.nav ol li a[href="A.html#FIRST_STEP"]{background-color:lime;}
div.nav ol li a[href="A.html#SAMPLE"]{background-color:silver;}
div#FIRST{background-color:yellow;}
div#PREPARED{background-color:aqua;}
div#FIRST_STEP{background-color:lime;}
div#SAMPLE{background-color:silver;}

-->
</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>

この回答への補足

ご丁寧なご回答をありがとうございます。

頂いたコードのままページを作成し確認をしたところ、
chromeは正常な状態で動作をしたのですが、IEは変わらず一番下のままでした。
（アンカーリンクも飛びませんでした。）

確認をしているOSは windows 7 ですが、ブラウザやOSの問題でしょうか？


また、いただいたコードをそのまま使用したので今回は関係ないと思いますが、
親ページの方の補足で、文字コードはEUCに限定されており、「DOCTYPE宣言」は出来ない状態です。
このあたりは何か影響しますでしょうか？


お手数おかけいたしますが、もし分かれば是非よろしくお願いいたします。

補足日時：2014/05/27 17:31
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： shockatz
  • 回答日時：

一般的に、仰っている内容は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>直前でいいと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。
「A.html側のドメインでjavascriptを動作させればすぐ解決する」というのは私も常々思っております。
javascriptを<body>内に記述しても動作するというのは存じていたのですが、やはり「制限」があり<body>内に記述もできないという状況です。

必要無いと思い記述をしておりませんでしたが、使用しているシステムは楽天ショップの「楽天RMS」です。
親フレームの方は楽天RMS内に記述、子フレームの方は「楽天GOLD」というサービスを使いFTPでサーバに直接アップをするという方法です。
他店の方もかなり苦労をされているようで、楽天RMS内は完全にJS不可のため、コンテンツを楽天GOLDの方で制作し、楽天RMSでiframeで呼び出すという手法をとっています。
すべてのページを楽天GOLDで制作すれば良いのではと思われるかもしれませんが、
アクセス解析や容量など諸々の問題があり実現は難しいです。

今後楽天の対応が改善されることを願うのですが・・・
ご回答ありがとうございました。

通報する
お礼日時：2014/05/27 17:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報