WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:インラインフレームのサイズをソースに合わせて変化させたい

0:[投稿] まほら [2005/08/05 22:42 ][環境:IE6 不明]

タイトルの通りです。
例えば、あるページにあるインラインフレームのソースをJavaで変化させた時に、そのソースのサイズに合わせてフレームのサイズも変化させる方法はないでしょうか?
ソースのHTMLファイルの縦幅とかが数値で得られると解決するんですが…、どなたかわかる方いらっしゃいましたらよろしくお願いします。


1:[回答] m035 [2005/08/06 10:33 ]

>Javaで変化させた時に
JavaScriptではないんでしょうか?
私、Javaはできませんので・・・

>フレームのサイズも変化
これはJavaScriptで出来ると思います。
document.getElementById("iframe名").width=数値;
document.getElementById("iframe名").height=数値;
で変更できるはず。
ですが、一文字のサイズを限定しないとインラインフレームのサイズは決められないと思いますが、そこは決めてあるんでしょうか?
<body style="font-size:10px"></body>
のように。


2:[回答] 神崎 [2005/08/06 12:22 ]

> そのソースのサイズに合わせて
ソースのサイズではなく、ウインドウのサイズということでいいのでしょうか?

>あるページにあるインラインフレームのソースをJavaで変化させた時に
サーバーサイドJavaアプリケーション(CGI)からHTMLを出力するのでしょうか?
JAVAアプレットからHTMLソースを変更することは出来ないと思いますから。

単にJavaScriptと間違えた可能性の方が高そうですけどね。

<iframe src="test2.html" widtH="50%" height="50%"></iframe>
これでもできますよ。
(Windows+IE6、他数種類)

%指定でなく数値指定ならJavaScriptでやらないと出来ないと思います
それならm035さんの方法で出来ると思います。


3:[回答] まほら [2005/08/06 14:10 ]

m035様、神崎様、ご回答ありがとうございます。

すみません、なにやらわかりにくい記述をしていたようで。
結構初心者なので用語もよくわからなくて…。
実際にやろうとしていることを書きます。

BODYタグに
<IFRAME FRAMEBORDER=0 SRC="●.html" NAME="iframe1" MARGINHEIGHT=0 WIDTH=770></IFRAME>
というインラインフレームを定義しています。(横幅は固定です)

HEAD内のSCRIPT(javascriptです、すみませんToT)には、動的変数N(整数値)が定義されていて、それを下記の関数changeに渡すことで、iframe1のソースを動的に変化させます。
function change(n){
 document.getElementById('iframe1').src = eval(n) + '.html';
}
ソースとなるファイルの名前は 3.html とか 5.html とかになってます。ここで、ファイルのページの大きさ(ウィンドウとかは一切関係なく、ページの上端から下端までの長さ)をXとします。Xはファイルごとに異なっています。

わからないのはここからで、上の関数にm035様の記された通り、
document.getElementById('iframe1').height = ???;
という一文を書き加えて、ソースと同時にフレームのサイズも変更しようとしています。つまり、フレームのソースが何であろうと、スクロールバーを表示させることなく、ソースファイルの全体が映し出されるようにフレームの高さを変更したいのです。このとき、???にXの値が入ればよいのですが…、肝心のXの求め方がわからないのです。何とか求める方法はないでしょうか?それともこの方法では実現不可能なのでしょうか?

長くなってしまってすみません。ご回答お待ちしています。


4:[回答] ミツ [2005/08/06 15:02 ]

かなり不完全、というか答えになってませんが。

<iframe src="〜" width="〜" height="〜"
onload="this.height=1;this.height=this.contentWindow.document.body.scrollHeight"></iframe>
一旦高さを1にして必ずスクロールする状態にしてからscrollHeight(※1)を設定しています。
が、どうもscrollHeightでは期待している値が得られないケースが多々あるみたいだし、IE,gecko,Operaで期待値との差も違うようです。
私も知りたいので時間が取れたらもう少し探してみますが
すっきりした回答知ってる方、お願いします。

※1
http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/measure/measuring.asp

なお、iframe内に読み込むリソースが別サーバに在る場合はこれは動きません。


5:[保留] まほら [2005/08/06 18:45 ]

ミツ様、ご回答ありがとうございます。

scrollHeight使ってページの大きさを測ることができたのですか!
貴重(?)な情報をありがとうございます〜(>∀<)
環境はIE6.0なのですが、今ん所何の問題もなく理想通り動いています。
感謝感謝ですm(_ _)m
どういう場合に都合良くいかないのかが謎ですが。
他にもすっきりした回答を知っている方がいらっしゃるかもしれないのでとりあえず保留とさせていただきます。
回答下さった皆様、どうもありがとうございました。


6:[回答] ミツ [2005/08/11 22:30 ]

> どういう場合に都合良くいかないのか
iframe内に読み込むHTMLが標準準拠モードの場合、違いが出るようです。
getComputedStyleやcurrentStyleでhtml要素やbody要素のmarginやpaddingを読み取って値を補正すれば完全になるかも。


7:[完了] まほら [2005/08/22 04:46 ]

ミツさん、ご回答ありがとうございます。
おそくなって申し訳ありません。

標準準拠モード、情けないことに初めてきいた単語です…。
レタリングのモードで、他に過去互換モードがあるということだけ調べましたが、正直あまり理解できていません…。

ソースとなるHTMLの(marginとかpaddingとか)レイアウト上の問題が原因で微妙なズレが生じてしまったりするということでしょうか?実際に色々いじくって試してみることにします。どうもありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World