-PR-
解決済み

インラインフレームの、リンク先のページに対応した高さ可変

  • すぐに回答を!
  • 質問No.3668064
  • 閲覧数1160
  • ありがとう数8
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 25% (5/20)

私のサイトで、題名のとおりの方法をしてしており、
現在、以下を利用して、可変が可能になっています。

function GetHeight(ID,NAME)
{
if (document.height)
{
document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;
}
else
{
document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px";
}
}


通常の場合はこれで大丈夫です。
しかし、リンク先のページにインラインフレームを使用していると、どうしてもうまくできません。

一番前に index.html。index.htmlの中にiframeとして、main.htmlを、 main.htmlの中にiframeとして、higumain.htmlをおいています。
それぞれのiframeを可変可能にしたいのですが、 index.htmlの中のiframe「main.html」がうまく可変されません。

index.htmlのiframe は、他のiframeを移用していないリンク先なら可変しました。



何故でしょうか。解決法、教えてください。
上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。
何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.5
レベル9

ベストアンサー率 86% (37/43)

> main.html内でリンクを作成して、main.htmlのiframe(higu.htmlが入っているiframe)にターゲットし、飛んだときに、
> その先のリンク先がhigu.htmlの高さより高いのに、可変しない(高くならない)のです。

・・・んー。いくらなんでもこれまでの説明からそれは読み取れませんね。。。現象はなるべく詳しく正確に記述されるのがよろしいかと。

とりあえずの解決策は、indexでのonloadをmainに統合することです。以下に例を示します。getIFrameDocument、GetHeightはjsファイルに外部化します。
【script.js】
function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}

function GetHeight(ID){
if (document.height) {
document.getElementById(ID).style.height = getIFrameDocument(ID).height +20 +"px" ;
}else{
document.getElementById(ID).style.height = getIFrameDocument(ID).body.scrollHeight +20 +"px";
}
}
【index.htm】
<html><head>
<script src="script.js"></script>
<script>
function GetHeightForIndex(){
GetHeight("main");
}
</script>
</head><body>
<iframe src="main.htm" id="main"/>
</body></html>
【main.htm】
<html><head>
<script src="script.js"></script>
<script>
function GetHeightForMain(){
GetHeight("hig");
parent.GetHeightForIndex();
}
</script>
</head><body>
<iframe src="hig.htm" onload="GetHeightForMain();" id="hig"></iframe>
<div style="background-color:blue;height:200px;"></div>
</body></html>
【hig.htm】
<html><head></head><body>
<div style="background-color:red;height:200px;">
<a href="hig1.htm">hig1.htm</a>
</div>
</body></html>
【hig1.htm】
<html><head></head><body>
<div style="background-color:yellow;height:400px;"></div>
</body></html>

行節約のためいろいろ削ってます。また、この場合iframeはidだけでOKなのでGetHeightを少し変えました。これで動くと思います。元のコードでindexのiframeのonloadはさらに内部のiframeのロード状態まで関知しません。なのでmainのiframeのonloadで親のiframeも同時にリサイズしています。iframeからparent.(関数名)で親ページの関数を操作できます。

参考にしてください。
補足コメント
yamamcks

お礼率 25% (5/20)

説明不足、本当に申し訳ございませんでした!
いまさらですが、以後、気をつけます!!

無事、動作しました!こんな私に丁寧な回答、本当に有難いです。
本当にありがとうございました!
投稿日時 - 2008-01-14 17:47:42
お礼コメント
yamamcks

お礼率 25% (5/20)

お礼を補足の方に記入してしまいました。
申し訳ないです。ありがとうございました!
投稿日時 - 2008-01-14 17:50:48
-PR-
-PR-

その他の回答 (全4件)

  • 回答No.2
レベル9

ベストアンサー率 86% (37/43)

index、main 両方ともFirefoxでも動くものにしてください。
以下でとりあえず動作確認しました。
【index.htm】
<html>
<head>
<script>
function GetHeight(ID,NAME){
if (document.height) {
document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;
}else{
document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px";
}
}
</script>
</head>
<body>
<iframe src="main.htm" onload="GetHeight(this.id,this.name);" id="main" name="main"/>
</body>
</html>
【main.htm】
<html>
<head>
<script>
function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}

function GetHeight(ID,NAME){
if (document.height) {
document.getElementById(ID).style.height = getIFrameDocument(NAME).height +20 +"px" ;
}else{
document.getElementById(ID).style.height = getIFrameDocument(NAME).body.scrollHeight +20 +"px";
}
}
</script>
</head>
<body>
<iframe src="hig.htm" onload="GetHeight(this.id,this.name);" id="hig" name="hig"></iframe>
<div style="background-color:blue;height:200px;"></div>
</body>
</html>
【hig.htm】
<html>
<head>
</head>
<body>
<div style="background-color:red;height:200px;"></div>
</body>
</html>
補足コメント
yamamcks

お礼率 25% (5/20)

んーー、すみません、状況が変わりません・・・

main.html  に、スクリプトとして、
function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}

function GetHeight(ID,NAME){
if (document.height) {
document.getElementById(ID).style.height = getIFrameDocument(NAME).height +20 +"px" ;
}else{
document.getElementById(ID).style.height = getIFrameDocument(NAME).body.scrollHeight +20 +"px";
}
}
を指定、

index.html  に、スクリプトとして、
上記(main.htmlと同じもの)を指定、これで出来なかったので、
function GetHeight(ID,NAME){
if (document.height) {
document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;
}else{
document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px";
}
}
をindex.htmlに指定してみましたが、出来ませんでした。


スクリプトの ID や NAME は 可変するiframeの名前に変えるなんてことしませんよね?何も変えずにやっているのですが・・・

すみません。原因が分かりましたら教えてください・・・
投稿日時 - 2008-01-11 19:51:26


  • 回答No.4
レベル9

ベストアンサー率 86% (37/43)

うーむ。だめですか・・・。

>> 2)No2で提示したコードそのものはお使いの環境で動作しましたでしょうか?(こちらでは動作しています。)
> 2)リンク先にiframeが埋め込まれていなければ可変しました。
「コードそのもの」とはそのままそれぞれコピーして各ファイル(現在作成しておられるページに組み込むのではなくて、テスト用に作成したもの)に貼り付けて動作させてみるという意味ですが、認識あってますでしょうか。こちらではご提示されたのと同一の環境でローカル・WEBサーバ上共に動作しています。ここでいう「動作」はindex.htmのIFRAMEから赤・青のDIVが共に見える状態を指します。

> 3)ドメインというのは、借りたサーバーとかなのでしょうか。
http://oshiete1.goo.ne.jp/kotaeru_reply.php3?q=3668064 ならば oshiete1.goo.ne.jp の部分を指します(参考URL参照)。同一フォルダ上とのことなので問題ないようですね。違う階層でも問題ありません。

2)の意図が間違いなく伝わっているとすると、OS・ブラウザ・コードが同一なのに動作が違うことになり、ちょっとお手上げです・・・。

もし2)の認識が違うなら、他に考えられる原因として、main、またはそのIFRAMEのページで内容生成にスクリプトを使用している、というのが考えられるのですが。onloadのタイミングよりも後にページの描画が完了するため(読み込み完了(onload)と描画完了は別)、ページの高さが正しく取得できない、というものです。

私に分かるのはこのくらいです・・・。すみません。
補足コメント
yamamcks

お礼率 25% (5/20)

えーっと、私の説明のほうで、不足している部分が判明しました。

2)の意図が勘違いしていましたので、テストページでためしました。
テストページはちゃんとできていました。
えっと、実はindex.htmlもテストページ同様にできていたんですよ。


できないのは、下記です。説明わかりにくいかもしれませんが・・・

index.htmlのiframe に main.html、
main.html のiframe に higu.html  がまず入っています。
ここはまででは、しっかりと可変します。
しかし、
main.html内でリンクを作成して、main.htmlのiframe(higu.htmlが入っているiframe)にターゲットし、飛んだときに、
その先のリンク先がhigu.htmlの高さより高いのに、可変しない(高くならない)のです。

この状態で、main.htmlを単体(inde.htmlのiframeじゃなくアドレス直接入力)で見ると、しっかり可変していました。
なので、index.htmlが可変していないようです。


説明不十分で本当に申し訳ないです。解決策ありましたら教えてください。
もし、無理な事ならば、main.htmlのiframe内が、最初に表示しているページより高いページに(リンクによって)変わったとき、GetHeight(今回使用しているjs)を解除し、iframeタグに指定したheightを優先させることなんて出来ませんかね?
色々と申し訳ございませんが、協力おねがいします。
投稿日時 - 2008-01-13 10:46:20
  • 回答No.1
レベル9

ベストアンサー率 86% (37/43)

main.htm側の
parent.frames[NAME]・・・

document.frames[NAME]・・・
にしたらとりあえずIEで動きました。ただし、Firefoxでは動きません。iframeのdocumentを取得する方法が違うためです。以下のようにするとFirefoxでも動くと思います。

function getIFrameDocument(aID){
if (document.getElementById(aID).contentDocument){
return document.getElementById(aID).contentDocument;
} else {
return document.frames[aID].document;
}
}

function GetHeight(ID,NAME)
{
if (document.height)
{
document.getElementById(ID).style.height = getIFrameDocument(NAME).height +20 +"px" ;
}
else
{
document.getElementById(ID).style.height = getIFrameDocument(NAME).body.scrollHeight +20 +"px";
}
}
補足コメント
yamamcks

お礼率 25% (5/20)

回答ありがとうございます!

最初に利用していたタグ を、
回答してくださったFirefoxでも動くタグ に変えましたが、
うまくいきませんでした。

main.html側に、 Firefoxでも動くタグ 、
index.html側に、 最初に書いたタグ 、でいいんですか?

index.html に、 テーブルを設置し、その中にiframe main.html を、
main.html に、 テーブルを設置し、その中にiframe higumain.html を、
おいています。テーブル内だからなのでしょうか?
投稿日時 - 2008-01-11 18:00:28
  • 回答No.3
レベル9

ベストアンサー率 86% (37/43)

いくつか確認させてください。
1)使用環境を教えてください。こちらはWinXp+IE6,Firefox2.0.0.11を使用しました。
2)No2で提示したコードそのものはお使いの環境で動作しましたでしょうか?(こちらでは動作しています。)
3)フレームで使用するページはすべて同一ドメインでしょうか。別ドメインの場合、スクリプトでその情報は取得不可なので動作しません。
4)詳しい不具合の状況。indexは動作するがmainは動作しない等。

疑わしいのは3)でしょうか。もしそうだとすると解決方法はありません。セキュリティ上できないことになってます。
1)が違う場合は可能であれば再度確認します。
2)が動作する場合は、仰るとおり、テーブル等ページ内容が複雑なため描画が遅れている可能性があります。そのため正確な高さが取得できていないと。(考えにくい気がしてますが。) また、position:absolute OR relative;の要素があるとドキュメントの高さが正確に取得できないので、それもあるかもしれません。
補足コメント
yamamcks

お礼率 25% (5/20)

1)WinXp+IE6(?),Sleipnir2.6.1 (IEのバージョンがよくわからなかったのですが、6.0.2900~っとありました)

2)リンク先にiframeが埋め込まれていなければ可変しました。

3)ドメインというのは、借りたサーバーとかなのでしょうか。
 一応、index.htmlとmain.htmlは同じフォルダにあります。(違う階層のファイルでもおkですか?)
 あと、main.htmlのiframeで表示するリンク先も同じフォルダ内です。

4)main.htmlを単体(index.htmlのiframe内じゃなくてmain.htmlが一番外)で見ると、iframeは可変しますし、
 index.htmlは、iframeを含まない別のリンク先なら可変しました。

index.htmlのiframeが iframeを含むmain.htmlを表示する際のみ、
index.htmlのiframeが可変されないようです。

何度も回答有難う御座います。できなくて申し訳ないです。
投稿日時 - 2008-01-12 16:12:13
このQ&Aのテーマ
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


専門家があなたの悩みに回答!

-PR-

ピックアップ

-PR-
ページ先頭へ