Operaでのobjectタブの高さ変更
- Operaでのobjectタブの高さを変更する方法について教えてください
- JavaScriptを使用して、読み込むページに合わせてOperaでobjectタブの高さを変更する方法を教えてください
- FireFoxと違ってOperaでobjectタブの高さ変更がうまくいかない場合、どのようにすれば解決できますか
- ベストアンサー
Operaでのobjectタブの高さ変更
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>
- AXRRXA
- お礼率78% (15/19)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
小さくする方だったんですね。再現できました^^; 参考ソースでは大きくする方もできなかったので 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>
その他の回答 (2)
- arexis
- ベストアンサー率66% (66/99)
<object onload="loads()" id="content" type="text/html" data=""></object> <script> function loads(){ document.getElementById("content").height=document.getElementById("content").contentDocument.body.offsetHeight+"px"; } </script> 私の環境では、ソース部分の load() 2箇所を loads()にするだけでOperaもFireFoxと同じようにきちんと表示されるので、上手くいかない再現ができないのでちょっとわからないです。
補足
回答をコピペさせていただきましたが、やはり上手くいきません。 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>
- arexis
- ベストアンサー率66% (66/99)
Ojbectタグをわざわざ使う理由は何かあるのでしょうから、とりあえずそのままとして。 オンロードで渡す関数名を load() ではなく loads() に変えてみてください。
補足
変えてみましたが、結果は同じでした。 高さを変える他の方法はないでしょうか。
関連するQ&A
- javascriptで<object>タグのリンクを変えたいのですが
<object>タグで指定したリンクをjavascriptで変えたいのですが・・・。 以下のように記述しているのですが上手くいきません。 <html> <head> <script langage="javascript"> function a(){ obj=document.getElementById("Link"); obj.getAttribute("data")=c.html; } </script> </head> <body onLoad="a()"> <object data="d.html" id="Link" width="700" height="500"></object> </body> </html> どなたかご教授宜しくお願いします。
- ベストアンサー
- JavaScript
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- JavaScript
- これは何をするスクリプトですか？
<head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript
- <object data="">の挙動について
お世話になります 何故表示がされなくなるのか理由が分からないのでお分りになられる方いらっしゃいましたら教えていただきたいのですが・・・ 用意したファイルは ┣ test.html ┏ a.html ┗ hoge(フォルダ)╋ b.html ┣ c.html ┣ d.html ┗ e.html ソースはこちら <script type="text/javascript"><!-- window.onload=function() { var SPANS = new Array(); SPANS = document.getElementsByTagName("span"); for(var i=0;i<SPANS.length;i++) { SPANS[i].onmouseover = function() { this.style.backgroundColor = "lightcyan"; } SPANS[i].onmouseout = function() { this.style.backgroundColor = ""; } SPANS[i].onclick = function() { Object(this.innerHTML); } } } function Object(str) { h = document.getElementById("Object"); h.innerHTML = "<object data='./hoge/"+str+".html' type='text/html'><\/object>"; } //--></script> <style type="text/css"><!-- object { width:800px; height:400px; margin:0px; } span { display:block; float:left; width:79px; height:30px; text-align:center; margin:0px; cursor:pointer; } --></style> </head> <body> <div> <div id="scriptcontents"> <span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span> <div style="clear:both;"></div> </div> <div id="Object"></div> <span>をクリックしたら<object>を使用して別のhtmlファイルを表示させてるのですが普通にしていたら表示はされているのですが以下の手順を踏むとOperaで表示されなくなるのですが理由が分かりません（－－；） 1).test.htmlを表示（これは5つとも自由に閲覧できます） 2).hogeフォルダ内の5つのファイルを名前を変えたりしてファイルの存在を削除 3).test.html試用（対象ファイルが無いので当然<object>内はNot Foundページになります） IE,Firefoxは何度押してもNot Foundページが出るのですがOperaは2回目以降反応無しになる(何も表示されない）） 4).hogeフォルダ内の5つのファイルを復元 5).test.html試用（IE,Firefoxは元通りになるのですがOperaは何も反応しないまま） なぜOperaは一度Not Foundページが表示されたら次から無反応になってしまうのでしょうか？ その表示されなくなった名前のファイルはもう2度と使用することはできないのでしょうか？
- ベストアンサー
- HTML
- designMode=on のときのキーイベント処理
HTMLエディタを使ったWEBアプリケーションを作っているのですが、 designMode=onにしてインナーフレームを編集可能にしたとき、 Mozillaの場合、キーイベントが反応せず困っております。(IEでは動きます) どなたか、ご存知のかたは教えてください。 よろしくお願いします。 OS : WindowsXP ブラウザ：firefox 2.0.0.4 ・ソース <html> <head> <script type="text/javascript"> var doc=null; function init(){ var doc = document.getElementById("testFrame").contentWindow.document; doc.designMode = "on"; doc.onkeydown = test; } function test(){ alert("OK"); } </script> </head> <body onload='init();'> <iframe id="testFrame" width="500px" height="500px" ></iframe> </body> </html>
- ベストアンサー
- JavaScript
- iframeのサイズの自動調整について教えてください。
iframeのサイズの自動調整について教えてください。 htmlにiframeで、cgiを組み込んでました。 cgiは、質問を投げる画面と結果を表示する画面があります。 質問画面と結果表示画面の長さは違います。 下記の2パターンで試してみたんですが、質問画面は問題ないですが、結果画面が問題ですね。 1．<iframe src="aa.cgi" style="width: 480px; height:auto;" onload 'this.style.height = parseInt(this.contentWindow.document.documentElement.scrollHeight + 30)+"px";'> </iframe> sapari,google chrome,operaでは、オーケー。 IE,firefoxでは、質問画面の長さのまま。 2.<iframe src="aa.cgi" onload="GetHeight(this.id)" id="Y" name="newY" height="1" width="480" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe> GetHeightのソースは、↓ <script language="JavaScript"> function GetHeight(Y) { var app = navigator.appName.charAt(0); if (app == "N") { document.getElementById(Y).height = parent.frames['newY'].document.height +20; } else { document.getElementById(Y).height = parent.frames['newY'].document.body.scrollHeight; } } </script> IE,firefoxでは、オーケー。 sapari,google chrome,operaでは、質問画面の長さのまま。 javascriptは苦手なので、まとめる方法か、別の方法がありましたら、 教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでgooglemapを出力していますが、firef
javascriptでgooglemapを出力していますが、firefoxで表示されません。 他のサーバで使用していた際はfirefoxでも問題なく表示できていました。何が問題でしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title/> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx" type="text/javascript"/> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.573027,xxx.xxxxxxxxx), 17); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.enableScrollWheelZoom(); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 450px; height: 300px;"/> </body> </html>
- ベストアンサー
- JavaScript
- X-Frame-Optionエラーの検出方法
iframeでX-Frame-Optionsが設定されているURL(例http://www.google.co.jp/m)を表示しようとすると、エラーとなり表示できません。 その際にアラートを表示したいのですが、どのタイミングで呼び出せばいいのでしょうか。 具体的には、 <html> <head> <script type="text/javascript"> function load() { var myframe = document.getElementById("myframe"); myframe.src = 'http://www.google.co.jp/m'; } function alertIFrameLoadError(){ alert('iframeロードエラー(X-Frame-Optionの可能性あり)'); } </script> </head> <body onload="load()"> <iframe id="myframe" src=""> </iframe> </body> </html> のソースにおいてalertIFrameLoadError()を呼ぶタイミングを教えて下さい。 iframeのonload,onerrorは呼ばれないようです。 ブラウザはsafariを想定していますが、他のブラウザでも何かヒントとなる事でも構いません。 以上、知恵を貸していただけると幸いです、よろしくお願いします。
- ベストアンサー
- JavaScript
- ウィンドウサイズの変更を滑らかに取得したい
<html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。
- ベストアンサー
- JavaScript
- JavaScriptでiframeの高さを自動調節する方法を試しているがうまくいかない
JavaScriptでiframeの高さを自動調節する方法を 下記サイトを参考に試しているのですが、 読み込み先ファイルをphpファイルにするとうまくいきません。 http://www.revulo.com/blog/20070616.html 《参考サイトより example.html》 <head> ...... <script type="text/javascript"> function resizeIframe() { var iframe = parent.document.getElementById("recent_iframe"); var height = document.documentElement.scrollHeight; iframe.style.height = height + 10 + "px"; } </script> </head> <body onload="resizeIframe()"> ...... 上記のようなソースを子HTMLファイルに書いて、親HTMLファイルから <iframe id="recent_iframe" src="example.html"> </iframe> というように読み込むと問題なく子ファイルの大きさに iframeの高さが自動調節されて表示されるのですが、 参考サイトのソースをphpファイルに記載して、 iframeからフルパスで読み込もうとするとうまく高さが調節されません。 <iframe id="recent_iframe" src="フルパス/exsample.php"> </iframe> 解決策はありますか？
- 締切済み
- JavaScript
お礼
正しく高さを認識することができました！ 僕の最初の質問文がわかりにくかったため、お手数をおかけしてしまいましたが おかげで満足のいくページが構築できそうです。ありがとうございました！