JavaScriptでiframeの内容を空ページにする方法
- JavaScriptを使用して、iframeの内容を空ページにする方法について教えてください。
- WinXPのIE8を使用している環境で、iframeのsrcに何も指定せずにhtmlを開くと、真っ白な状態で開かれます。しかし、クリアボタンを押下してもうまくいきません。iframeの中身を空にする方法について教えてください。
- iframeの中身を空にする方法がわかりません。JavaScriptでdocument.getElementById("...").src = "about:blank"; または document.getElementById("...").src = ""; のようにしてみたのですが、うまくいきません。空ページにする方法があれば教えてください。
- ベストアンサー
JavaScriptでiframeの内容を「空ページ」にする方法
JavaScriptでiframeの内容を「空ページ」にする方法 動作環境はWinXP IE8です。 iframeでsrcに何も指定しないでhtmlを開くと、真っ白な状態で開きます。 プロパティを見ると「about:blank」となっています。 一旦他のページを開いたあとに、クリアボタン押下時に この状態にしたいのですが、どうもうまくいきません。 とりあえず、普通にURLを指定するときと同じ感覚で document.getElementById("…").src = "about:blank"; と書いてみたのですがうまくいきません。 document.getElementById("…").src = ""; でも同じです。 iframeの中身を空にする方法はないのでしょうか？ 出来るのかできないのか、もしできるのならその方法を教えてください。 よろしくお願いします。
- mibusys
- お礼率99% (156/157)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
うーん。再現できませんね、IE8で試してるんですけど ↓とどこが違います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> <script type="text/javascript"> <!-- function fuga(){ document.getElementById("hoge").src = "about:blank"; } // --> </script> </head> <body> <div><button onclick="fuga();" type="button">clear</button></div> <iframe src="http://okwave.jp/qa/q6283562.html" id="hoge"></iframe> </body> </html>
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
removeAttribute を使ってみてはどうでしょう？ document.getElementById('SampleFrame').removeAttribute('src');
お礼
原因はonclick時に呼び出す自分で作ったfunctionの 名前が無効なものだからでした。 ご提示いただいた方法でも実現できました。 ありがとうございました。
関連するQ&A
- 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> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ よろしくお願いします＞＜
- ベストアンサー
- 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
- 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)">ｂ</a> <a href="c.html" onclick="setCook(this.href)">ｃ</a> <a href="d.html" onclick="setCook('')">ｄ</a> <a href="e.html" onclick="setCook('')">ｅ</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
- 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>
- ベストアンサー
- JavaScript
- 【JavaScript】iFrame内submit
JavaScriptで、iFrame内のFormをsubmitする方法を教えてください。 条件： iFrameに読み込むページは千差万別で、FormにIDもNameも設定されていない状況（ただし、必ずFromは１つ）で、そのiFrame内のフォームをsubmitする方法。 Form名がわからないですから、getElementsByTagName("form")[0]で呼び出すしかなさそうなんですが、 （iFrameの名前を"ifl"とします）iFrameの外に置いた空アンカーで <a href="#" onclick="parent.ifl.getElementsByTagName(\"form\")[0].submit()">iFrame内をsubmit</a> としても <a href="#" onclick="document.ifl.getElementsByTagName(\"form\")[0].submit()">iFrame内をsubmit</a> としてもうまく動きません(；´Д｀) どういうエラーが出てるのか知りたかったので、onclick内部を外出しして、try-catchでくくり function pushSubmit() { try { eval("parent.ifl.getElementsByTagName(\"form\")[0].submit()"); } catch(e) { alert(e); } } としてから、pushSubmit()を空アンカーで実行すると、エラーは「Error: Permission denied for <file://> to get property Window.getElementsByTagName」と返ってきます。 もう、どうにも突き当たってしまいました・・・ どなたか光明を差して下さい・・・orz
- ベストアンサー
- JavaScript
- 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);
- ベストアンサー
- JavaScript
- Safariで<iframe>のinnerHTMLを取得する方法
MacのブラウザSafariで <iframe id="iframe1" src="test.txt" style="display:none" width="1" height="1"></iframe> で読み込んだtest.txtの内容が取得できなくて困っています。 ちなみにWindowsのIEとMacのFireFoxでは下記のようなかんじで取得できています。 IEの場合 var text = this.iframe1.document.body.innerHTML; FireFoxの場合 var text = document.getElementById("iframe1").contentDocument.body.innerHTML; MacのSafariでは上記どちらの方法でも取得できませんでした。 他にも色々調べて試してみたのですがやはり上手くいきません。 <iframe>タグ内のstyle指定をなくしてみたらiframeにテキストの内容は表示されているのであとは取得できればいいのですが。。 JavaScriptは初心者なので記述等不可思議かもしれません。 あわせてご教授いただけたらと思います。
- ベストアンサー
- JavaScript
- リンク元の引数を取得してjavascriptを実行したい
リンク元に引数を入力して、リンク先でページのインラインフレームのページが指し換わるjavascriptを実行させたいです。 実行させたいjavascriptは function change(URL1,URL2) { document.getElementById('contents1').innerHTML = '<iframe src="'+URL1+'" width="620" height="343" frameborder="0" scrolling="no" name="myFrame1" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe>' ; document.getElementById('contents2').innerHTML = '<iframe src="'+URL2+'" width="620" height="215" frameborder="0" scrolling="no" name="myFrame2" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe>' ; } 引数からURL1とURL2に代入したいです。 アドバイスよろしくおねがいいたします。
- 締切済み
- JavaScript
- iframe内から外のjavascriptを動かす
cgiを使ってiframe内にコンテンツを表示させていて、 iframe内にどれを表示するかはiframe外のjavascriptで操作しています。 他のページからこのページへアクセスしたときに、 どのiframeを表示するか指定したいのですが、どのようにすればいいのでしょうか？ ちなみにcgiはmovabletypeを使っています。 できれば、iframeにアクセスした際に、iframe外も自動で表示されるようにしたいです。 （iframeのアドレスにアクセスするとコンテンツがページの真ん中にポツンと表示されてしまうので） まだ本当に始めたばかり初心者なので、右も左もわからないのですが どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- 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タグ)に入れればいいですよね？
- 締切済み
- JavaScript
お礼
>うーん。再現できませんね、IE8で試してるんですけど >↓とどこが違います。 ご提示いただいたコードで試してみました。実現できました。 私のと違うところは…function名が「huga」では無く 「clear」であること…。 どうやらそれが原因だったようです。「clear」が予約語であり、 メソッド名に使用できないみたいですね。 恥ずかしいです。 お手数をおかけしました。 サンプルコードを書いていただいたおかげで 間違いにすばやく気付くことが出来ました。 ありがとうございました。