iframeの高さ自動調整
iframeの高さ自動調整
いつもお世話になっております。IFrameの高さについて、教えてください。
IFrameの高さを、その内部に読み込むページの高さに自動的に合わせたいのですが、上手くいきません。
色々調査して、
<iframe src="http://xxx.yyy.com/" onload="this.style.height=this.contentWindow.document.body.scrollHeight;" width="100%" frameborder=0></iframe>
等を試しましたが、IE7ではアクセス拒否のエラーが出ます。
同じディレクトリのhtmlを指定するとうまくいくようですが、http://で指定されるurlを指定するとどうしてもうまくいきません。
このようなことは不可能でしょうか？よろしくい願いします。
投稿日時 - 2008-09-06 14:02:28
0人が「このQ&Aが役に立った」と投票しています
回答（3件中 1～3件目)
No.2 です。
＞同じサイト(ディレクトリ)にあるpageは私の方法でもうまく行きます。
失礼しました。勉強不足でした。
contentWindow
こんな便利なプロパティがあるとは知りませんでした。使ってみたいと思います。
ちなみに firefox,safari,operaなどでも問題なく使用できるのでしょうか？
ちょっとgoogleで検索してみたところ、firefox1.5の場合は若干注意が必要みたいですが..
http://wiki.bit-hive.com/tomizoo/pgdiff/?pg=JavaScript%20%A5%A4%A5%F3%A5%E9%A5%A4%A5%F3%A5%D5%A5%EC%A1%BC%A5%E0(iframe)%B4%D8%CF%A2&rev=6
逆に質問して恐縮ですがご存知でしたらご教授いただけますでしょうか。
投稿日時 - 2008-09-08 11:41:25
補足
よくわかりません。試してみては
投稿日時 - 2008-09-21 06:19:30
読み込むhtmlが自分の作成したものであることが前提になりますが、こんな感じでどうでしょう？
親側からのコントロールは無理そうな気がします。。
親:ajdust_frame01.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
iframe {
border: solid 1px silver;
}
</style>
</head>
<body>
<iframe id="ifm" src="adjust_frame02.html"></iframe>
</body>
</html>
子:ajdust_frame02.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html,body{
margin:0;
border:none;
}
</style>
<script>
window.onload=function(){
parent.window.document.getElementById('ifm').style.height=document.body.clientHeight;
}
</script>
</head>
<body>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
</body>
</html>
イントラ系の業務アプリを作るとき良く使います。ただ自宅のFirefox3で試したら警告らしきものがでたような気がしましたが。。
IE6では普通に動きます。
投稿日時 - 2008-09-08 09:57:00
お礼
コードの例示をありがとうございます。同じサイト(ディレクトリ)にあるpageは私の方法でもうまく行きます。
投稿日時 - 2008-09-08 11:02:23
スポンサーサイト検索
新着
注目ピックアップ
おすすめリンク