重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：yamamcks
  • 質問日時：
  • 回答数：5件

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

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を移用していないリンク先なら可変しました。



何故でしょうか。解決法、教えてください。
上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。
何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： susie-t
  • 回答日時：

> 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.(関数名)で親ページの関数を操作できます。

参考にしてください。

この回答への補足

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

無事、動作しました！こんな私に丁寧な回答、本当に有難いです。
本当にありがとうございました！

補足日時：2008/01/14 17:47
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼を補足の方に記入してしまいました。
申し訳ないです。ありがとうございました！

通報する
お礼日時：2008/01/14 17:50

No.4

  • 回答者： susie-t
  • 回答日時：

うーむ。

だめですか・・・。

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

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

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

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

私に分かるのはこのくらいです・・・。すみません。

参考URL：http://www.next-web.ad.jp/theFirstTime/Hosting/d …

この回答への補足

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

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
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： susie-t
  • 回答日時：

いくつか確認させてください。


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

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

この回答への補足

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

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

3)ドメインというのは、借りたサーバーとかなのでしょうか。
　一応、index.htmlとmain.htmlは同じフォルダにあります。（違う階層のファイルでもおｋですか？）
　あと、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
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： susie-t
  • 回答日時：

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>

この回答への補足

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

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
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： susie-t
  • 回答日時：

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";
}
}

この回答への補足

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

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

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

index.html　に、　テーブルを設置し、その中にiframe main.html　を、
main.html　に、　テーブルを設置し、その中にiframe higumain.html を、
おいています。テーブル内だからなのでしょうか？

補足日時：2008/01/11 18:00
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報