• 締切済み

JavaScriptでiframeの高さを自動調節する方法を試しているがうまくいかない

askaaskaの回答

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

あなたがやりたいことって iframe.style.height = height + iframe.height + "px"; こういうことではないの?

cptskgj
質問者

お礼

回答いただきありがとうございました。 質問に掲載した参考ソースのまま、再度書き直してみたら動きました。 お騒がせしました。

関連するQ&A

  • iframeのサイズを自動設定する方法はあります

    iframeをJavascriptで生成後、srcで指定されたHTMLコンテンツの高さに 自動的にiframeのheightを設定したいのですが可能でしょうか? var iframe = document.createElement('IFRAME'); iframe.setAttribute('src', 'http://net-bike.ne.jp'); iframe.setAttribute('width','100'); iframe.setAttribute('height','100'); currentScript.parentNode.insertBefore(iframe, currentScript.nextSibling);

  • iframe の高さをページごとに調節

    iframeを使用していますが、 読み込むページによって高さが異なるため見栄えが悪いです。 javascriptで指定できるそうですが、中々うまくいきません。 指定する方法を知っている方がいましたら教えてください。。 また、読み込むページがcgiの場合でも調節は可能でしょうか?? ========= ちなみに、下記方法で行った場合に失敗しています。 <iframe name="main"id="frame_set" src="http://www.***.com/***.cgi" width="100%" height="500" frameborder="0"> </iframe> <script language="JavaScript"> <!-- function frame_check(){ if(frame.document.body){ f=frame.document.body.scrollHeight; if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> ====================== よろしくお願いします><

  • iframeクッキー あと少しで

    またしても立ててしまいました。 自分の力ではどうしようも出来ないので、立てたことお許しください。 index.htmlのiframeに最初に表示されているページ a.html index.htmlの<a>タグリンクでiframe内に表示するページの内、  クッキーによって、更新おしてもiframe内を変えないページ b.html・c.html  クッキーを解除し、更新を押すと、a.htmlを表示するページ d.html・e.html 現在、今までの質問で以下のタグでiframeのクッキーを使用しています。 ************************************************************************** index.html ************************************************************************** <head>内  <script language="JavaScript" src="/standard.js"></script>  <script><!--  function GetHeightForIndex(){  GetHeight("tmain");  }  //--></script>  これは、iframeの高さ可変のタグです <body>内  <a href="b.html" onclick="setCook(this.href)">b</a>  <a href="c.html" onclick="setCook(this.href)">c</a>  <a href="d.html" onclick="setCook('')">d</a>   <a href="e.html" onclick="setCook('')">e</a> <script type="text/javascript"><!-- var cook_key = "iframesrc"; if(cook_src) document.getElementById('iframe名').src = 'a.html'; var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } var file = cook_src? cook_src[1] : 'a.html'; document.write('<iframe class="tmain" src="',file,'" id="iframeID" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe>') document.getElementById('tmain').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.html') : 'a.html'; function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } //--></script> <noscript> <iframe class="tmain" src="a.html" id="iframeId" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe> </noscript> ************************************************************************** standard.js ************************************************************************** //iframe高さ可変 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"; } } //iframeクッキー var cook_key = "iframesrc"; window.onload = function(){ } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } user_pref("dom.disable_window_open_feature.scrollbars", true); ************************************************************************** この状態で現在、困っているのは  a.htmlを表示している状態で更新を押すと、iframe内が404になることです。 b.htmlなどで更新を押すと、b.htmlが表示されたままだし、 d.htmlなどで更新を押すと、a.htmlが表示されます。 解決方法教えてくださいっ。

  • javascriptを無効にする方法~<iframe>タグが正常に動作しない~

    下記、HTMLを作成したのですが、wikipediaのjavascript?によって、折角開いた、yahooのページもwikipediaにとって変わられてしまいます。 wikipediaのjavascriptを無効にする方法は無いでしょうか?若しくは、こういったjavascriptを見つけた時、強制的に、排除する方法など無いでしょうかね? 折角開いたページが、こういったjavascriptがあることで全て強制的に飛ばされてとても困っています。 宜しくお願い致します。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IFRAME src="http://ja.wikipedia.org/" width="900" height="1500"></IFRAME> <HR> <IFRAME src="http://yahoo.co.jp" width="900" height="1500"></IFRAME> </BODY> </HTML>

  • iframeクッキー2

    すみません。解決したと思っていたのに後で確認したところ、出来ていませんでした。 一度削除したのに、またこうやって立てて、申し訳ないです。 何度も試行錯誤しましたがまったくうまくいかなかったので質問させて頂きます。 testページではできたのですが、index.htmlの方にするとうまくいきません。 タグをおいておきます。 ************************* index.htmlの基本とiframe ************************* <html> <head> <title></title> <META>(3行、METAタグをおいています) <link rel="stylesheet" type="text/css" href="/standard.css"> <script language="JavaScript" src="/standard.js"></script> <script> function GetHeightForIndex(){ GetHeight("iframeのID"); } </script> </head> <body onLoad="Clock(),Ref()"> <table ~~~ ~~~ <td valign=top width=87% rowspan=2> <script type="text/javascript"> var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */ var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } var file = cook_src? cook_src[1] : 'a.htmlにあたるページアド'; (/inde.html なら、 /フォルダ名/a.html のファイルの位置にあります) document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } </script> <noscript> <iframe class=tmain src=.htmlにあたるページアド id="iframeのid" name="iframeの名前" frameborder=0 scrolling=no height=1500></iframe> </noscript> </td></tr> </table> </body> </html> ************************* index.htmlのリンク ************************* <a href=c.htmlにあたるページ onclick="setCook(this.href)">掲示板</a> </td><td class=white width=1> <div id="line"></div> </td><td class=white><center> <a href=d.htmlにあたるページ onclick="setCook(this.href)">チャット</a> a.htmlはテーブルリンクを使用しています。 <table ~~~ <td onClick="tmain.location.href='a.htmlにあたるページ',setCook(this.href)" STYLE="cursor:hand;"> ************************* standard.js ************************* 時計や更新日、iframeの高さ可変など~~~ //iframeクッキー var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */ window.onload = function(){ if(cook_src) document.getElementById('iframeのID').src = ''; var cook_src; var cookies = document.cookie.split(';'); for(var i=0; i<cookies.length; i++){ if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; } } document.getElementById('iframeのID'').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.htmlにあたるページアド') : 'a.htmlにあたるページアド'; } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } こういう状態なのですがうまく機能されません。 この状態だと、 最初に表示されるa.html  × (表示されない。404になる。) b.thmlの表示と更新しても同じように表示される(クッキー有) ○ c.htmlやd.htmlなど、表示 ○  ↑の状態でを更新をおす。 ×  (a.htmlの最初に表示するときと同じように404) a.htmlのリンクを押す。(a.htmlが表示される) ○ document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') の ',file,'の部分をa.htmlにあたるページに直すと、 最初に表示されるa.html、c.htmlとd.htmlを更新した際、共にa.htmlが正常に表示されたので、出来たのかと思ったのですが、 b.htmlで更新を押すと、クッキーが無になり、a.htmlが表示されるようになる。 何度もすみませんが、うまくいかず、困ったので教えてください。 P.S.  b.htmlのようなページを複数にする場合には、 リンクの onclick="setCook(this.href)" をb.htmlのようにしたいページのリンク(aタグ)に入れればいいですよね?

  • IFRAMEで高さを自動調整したい

    IFRAMEを使っているのですが、PCを起動して最初にページを開いたときだけ、正しい高さに設定できなくて困っています。 「更新」をクリックするとそれ以降はうまく動くのですが... IE(6)の症状で、FireFoxではPC起動直後でも問題なく動きます。 <iframe src="http://aaaaa.php?mode=abc" onload="LoadFrame(this.id)" id="Ifr-a" width="700" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe> javaScript側は、 function LoadFrame(frid) { var IFR = document.getElementById(frid); IFR.height = (IFR.contentWindow)? IFR.contentWindow.document.body.scrollHeight: document.frames[frid].document.body.scrollHeight; } PCを起動した直後の1回目だけうまく表示されません。 IFR.height<1のようなので、処理結果は0になってるようです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部javascriptファイルをjavascriptから動的に呼び出したい

    呼び出し元のURLによって動作を変えたいJAVASCRIPTがあります。 普段外部のJAVASCRIPTを呼び出すときはよくこうするのですが <script type="text/javascript" src="js.php?key=url"></script> これでは「key=url」が固定になってしまいます。そこで下記のように <script> var commentname=document.URL; var str=encodeURIComponent(commentname); document.write('<script type="text/javascript" src="read.php?key=',str,'"><\/script>'); </script> document.writeを使って無理やり外部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 配列とiframe

    カテゴリを誤って投稿してしまいました。 インラインフレームを二つ(iframe1,iframe2)用意し、jQueryにてクリック出来るようにしたdiv要素のクリックで、それぞれのリンク先をJavaScriptの配列に収めた連番通り、1,2,3,4…htmlと表示させたいのですが、二つの配列を使用すると連番通りに表示されなくなります。(一つの配列使用では連番通りに表示されます。) 1クリックで、iframe1にはiframe1link1.htmlの表示、iframe2にはiframe2link1.htmlの表示。クリックごとにlink2,link3と順番どおりに表示する、これを可能にするお知恵を拝借したいと思い投稿させて頂きます。よろしくお願いいたします。 ================ (JavaScript(1)iframe1.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe1link1.html"; ******* URLs[10]="iframe1link10.html"; function Jump1(){ cnt++; if(cnt==11) {cnt=0;} iframe1.location.href=URLs[cnt]; } ================= (JavaScript(2)iframe2.js) var URLs=new Array(); var cnt=0; URLs[1]="iframe2link1.html"; ******* URLs[10]="iframe2link10.html"; function Jump2(){ cnt++; if(cnt==11) {cnt=0;} iframe2.location.href=URLs[cnt]; } ================ (HTML) <!doctype html> <link rel="stylesheet" href="./css/style.css" type="text/css"> <script src="iframe1.js"></script> <script src="iframe2.js"></script> <title>sample</title> <div id="container" class="div" onclick="Jump1();Jump2()"> <div id="main"> <iframe src="./iframe1link0.html" id="iframe1"></iframe> <iframe src="./iframe2link0.html" id="iframe2"></iframe> </div> </div> これでは連番通りにいかない。 ====================

  • postMessageによるiframeの書き換え

    iframeに表示している自身のブログを作成・修正するスクリプトを考えていますがうまくいきません。 「contentWindowで取得した変数の属性は読み取り専用なので、変数を操作するにはpostMessageを使う必要がある」といった記事があったので、自分なりにスクリプトを書いてみました。以下が、そのサンプルです。 親のparentから子のiframeに変数var1をpostMessageで送り、子側で変数var1を使ってoutputの内容を書き換えています。 しかし、これだとcontentWindowで変数を取得・操作を行なった場合と何ら変わらない結果になってしまいます。 つまりiframe.htmlを直接ブラウザで開いて表示しても、outputの表示内容が書き換わっていません。 どこに誤りがあるのでしょうか。 それとも「読み取り専用」に関する私の理解が間違っているのでしょうか。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>parent</title> </head> <body> <iframe id="iframe" src="iframe.html"></iframe></br> 天気<input type="text" id="var1" value=""> <input type="button" id="build" onclick="send()" value="データ送付"> <script type="text/javascript"> function send(){ var win = document.getElementById("iframe").contentWindow; win.postMessage(document.getElementById("var1").value, '*'); } </script> </body> </html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>iframe</title> </head> <body> <p>タイトル</p> <div id="output"></div> <div id="var1"></div> <script type="text/javascript"> window.addEventListener('load', function(){ var var1 = "晴れ"; build(var1); }); function onMessage(e) { var var1 = e.data; build(var1); } window.addEventListener("message", onMessage, false); function build(var1) { var output = "きょうは" + var1 + "です。"; document.getElementById("output").innerHTML = output; } </script> </body> </html>