iframe代わりにobjectタブを使用しています。読み込むページにあわせてjavascriptで高さを変更したいのですが FireFoxと違ってOperaではどうもうまくいきません。どのようにすればよいのでしょうか。どなたか回答お願いします。ちなみに現在のソース（必要部分のみ）は以下のような感じです。 function load(){ document.getElementById("content").height=document.getElementById("content").contentDocument.body.offsetHeight+"px"; }

function loads(){ document.getElementById("content").height=document.getElementById("content").contentDocument.body.offsetHeight+"px"; } 私の環境では、ソース部分の load() 2箇所を loads()にするだけでOperaもFireFoxと同じようにきちんと表示されるので、上手くいかない再現ができないのでちょっとわからないです。

Operaでのobjectタブの高さ変更

解決済

質問者：AXRRXA
質問日時：2008/02/29 12:08
回答数：3件

iframe代わりにobjectタブを使用しています。
読み込むページにあわせてjavascriptで高さを変更したいのですが
FireFoxと違ってOperaではどうもうまくいきません。
どのようにすればよいのでしょうか。どなたか回答お願いします。

ちなみに現在のソース（必要部分のみ）は以下のような感じです。
<object onload="load()" id="content" type="text/html" data="～"></object>
<script>
function load(){
document.getElementById("content").height=document.getElementById("content").contentDocument.body.offsetHeight+"px";
}
</script>

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： arexis
回答日時：2008/02/29 23:44

小さくする方だったんですね。

再現できました^^;

参考ソースでは大きくする方もできなかったので load()の名前変更で大きくできるので解決すると思い込んでしまってました。

で、ちょっといくつか試しましたが、
OperaはObjectタグのheightがそのままコンテンツのbodyのoffsetHeightになってしまうようです。(つけない場合は150pxがデフォ?)
Objectタグに height='0'をつければ 0って戻りますし。
SafariもOperaに似た動きしましたが 0pxに設定すると逆にほぼ正しいHeightを返してくれるようになりました。
でもOperaは駄目ですね。

なので、小手先の方法ですが
読み込ませる test2.htm のBODYの内側に<div id="body"></div>を囲んでしまい、
このDIVのoffsetHeightを求めれば、ほどほど正しい値が戻るようです。
読みこませるHTMLファイルが自分の物でこれがかのうなら、なんとか、、

<object onload="loads(this)" id="content" type="text/html" data="./test2.htm" ></object>
<script>
function loads(obj){
var Height = obj.contentDocument.getElementById('body').offsetHeight
alert(Height)
obj.height = Height + "px";
}
</script>

ただ、これだとOpera、Safariだとスクロールバーも出るので、
style指定にして縦も5pxくらい足すとOperaではスクロールバーも出なくなるみたいですね。

----------test1.htm----------
<html>
<body>
<object onload="loads(this)" id="content" type="text/html" data="./test2.htm" ></object>
<script>
function loads(obj){
var Height = obj.contentDocument.getElementById('body').offsetHeight

alert(Height) //確認

obj.style.height = Height + 5 + "px";
}
</script>
</body>
</html>

----------test2.htm----------
<html>
<body>
<div id="body">
test<br>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

正しく高さを認識することができました！
僕の最初の質問文がわかりにくかったため、お手数をおかけしてしまいましたが
おかげで満足のいくページが構築できそうです。ありがとうございました！

通報する

お礼日時：2008/03/01 00:04

No.2

回答者： arexis
回答日時：2008/02/29 19:43

<object onload="loads()" id="content" type="text/html" data=""></object>

この回答への補足

回答をコピペさせていただきましたが、やはり上手くいきません。
objectタグに読ませる内容をどのようにしてもoffsetHeightの値が「150」となります。
できる限り簡単にした以下の2つのファイルを同じフォルダに置きtest1.htmにアクセスすると
Firefoxでは「19」、Operaでは「150」とダイアログ表示されます。
ちなみにサーバーはApache2.2.4でOperaのバージョンは9.26です。

----------test1.htm----------
<html>
<body>
<object onload="loads()" id="content" type="text/html" data="./test2.htm"></object>
<script>
function loads(){
alert(document.getElementById("content").contentDocument.body.offsetHeight);
}
</script>
</body>
</html>

----------test2.htm----------
<html>
<body>
test<br>
</body>
</html>