- ベストアンサー
渡された引数をインラインフレーム名として使うには
現在、以下のような関数を使って 任意のインラインフレーム内の任意ID部分のHTMLを改変するスクリプトを作っています。 <script> function func(framename,id) { parent.framename.document.getElementById(id).innerHTML=''; } </script> <body> <a href=# onclick="func('Frame1','ID1')">Frame1のID1を改変</a> <iframe name="Frame1" src="javascript:document.write('<div id=ID1><p>ID1</p></div>')"></iframe> </body> つまり、インラインフレームの name と div要素の id を引数として関数に渡しているのですが、 上記のように書くと「parent.framename.document は Null またはオブジェクトではありません」とエラーが出てしまいます。 id の方はエラーなく処理できるようなのですが、 引数として渡した文字列を「フレーム名」として処理するにはどうすればよいのでしょうか？ ご回答よろしくお願い致します。
- ajrkmkrn
- お礼率95% (19/20)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは parentは子ページから親ページもしくは別の子ページに対して使うものです 親ページから子ページにはdocument.フレームnameかそのままフレームnameを使用します あとそのままframenameを使うと'Frame1'.document～～となるのでエラーになります 以下のようにしてください <script language="javascript"> <!-- function func(framename,id) { framename.document.getElementById(id).innerHTML = ""; } //--> </script> <a href=# onclick="func(Frame1,'ID1')">Frame1のID1を改変</a> もしくはNo.1様のようにidでするかのどちらかです
その他の回答 (1)
- shirayukix
- ベストアンサー率43% (90/207)
よく分かりませんがiframeにもidを振ることを提案します。 document.getElementById(framename).document.getElementById(id).innerHTML=''; これではiframeの内側のinnerHTMLは取得できないですね。
お礼
ご回答ありがとうございます。 分かりにくい拙文で大変申し訳ありませんでした。 iframeにもidを振るという方法もありますね。 参考にさせていただきます。
関連するQ&A
- 親ページから子ページ内の操作をする iframe
インラインフレームを用いたサンプルを作っています。 親から子へ指示を送ったら、子がそれに応じるというものです。 ローカル環境でエラーを出さずに実現するには postMessageで、どんなコードになりますか？ 【親ページ】parent.html <body style="background:bisque"> <div>parent.html 親ページです.</div> <pre> 【テーマ】親ページから子ページ内の操作をする ＜条件＞ ・ローカル環境 ・親子とも同じ場所 ・親の指示で子が応じる </pre> <iframe id="iframe2" width="500" height="160" src="./child.html"> </iframe> <div>親からの指示内容</div> <div><button onclick="func1()">書き換え１</button> 「囲まれています」を「囲まれました」に書き換える</div> <div><button onclick="func2()">書き換え２</button> 「-----」を「親から伝言あり」に書き換える</div> <script> //子に指示する関数 function func1(){ } function func2(){ } </script> </body> 【子ページ】child.html <body style="background:#eee"> <div>child.html 子ページです.</div> <p> <span id="test">ここは「id属性がtest」のspan要素に囲まれています。</span> <div id="result">output:<span>-----</span></div> </p> <script> //子が応じる関数 </script> </body>
- ベストアンサー
- JavaScript
- designModeをOnにしたインラインフレームに入力した文字を取得
Webページ上にインラインフレームを定義して、その中身のdesignModeをOnにして、インラインフレームのBODYを編集できるようにしています。 JavaScriptで編集したBODYの中身の文字列を取り出したいのですが、方法が分かりません。アドバイスをお願いします。 ソースは↓のような感じにしています。 ----- <html> <body> <iframe src="" id="edit" width="200" height="200"></iframe> <script language=JavaScript> <!-- frames[0].document.designMode = "On"; // --> </script> <br> <input type="button" onclick="JavaScript:DispEdit();" value="中身表示"> <script language=JavaScript> <!-- function DispEdit() { //alert(frames[0].document.body.text); //ここで編集したiframeの中身を取り出したい！ } --> </script> </body> </html> -----
- ベストアンサー
- JavaScript
- インラインフレームで表示されるページのタイトルを取得したい。
よろしくお願いします。 インラインフレームを利用したWebページを作成しています。 FLASHでボタンつくったボタンをクリックすると、 インラインフレームの中の表示が切り替わるようになっています。 そこで、どうしてもそのインラインフレームに表示される ページのタイトルとファイル名を取得したいのですが、 何かよい方法はないでしょうか？ <div id="contents"> <iframe src="sample.html" name="frame" width="800" height="600" frameborder="0"> インラインフレーム機能を使用しています。インラインフレーム対応のブラウザで試してください(*´∀｀) </iframe> </div> リンク先は、FLASHのボタンにつくっています。 インラインフレームの表示内容がが切り替わった時に、 sample.html ⇒ hoge.html hoge.htmlのタイトル名とファイル名を親フレームから 呼びだしたいと思っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- インラインフレーム内を送信する
インラインフレーム内（test.asp）で送信して、main.aspに情報を引き渡したいのですがうまくいきません。 現状、下記のようなかんじで実行するとインラインフレーム内にmain.aspの内容が表示されてしまいます。 /* main.asp */ <IFRAME src="test.asp"></IFRAME> /* test.asp */ <SCRIPT LANGUAGE="JavaScript"> function change(num){ document.form_1.action="main.asp?no=<%=num%>"; document.form_1.submit(); } </SCRITP> <BODY> <FORM name="form_1"> <TABLE> <TR id="t1" onClick="change(1)"> <TD align="center">1</TD> <TD align="center">aaaaaa</TD> <TD align="center">bbbbbb</TD> </TR> </TABLE> </BODY> どのような状況か伝わりにくいと思いますが、何かよい方法があればよろしくおねがいします。
- ベストアンサー
- JavaScript
- 引数を利用したい
いつもお世話になっています。 さて、早速ですが 送られてきた、引数を値として使えないのでしょうか？ <td><input type="checkbox" name="C1" value="1" onChange="func(C1)"></td> <td><input type="text" name="create_date"></td> <td><input type="text" name="transaction"></td> 上記HTML中のチェックボックスのname属性値を引数にfunc関数に渡しています。 function func(str) { document.form1.str.click(); } func関数内で渡された引数を、str変数に入れてそれを値として使いたいのですが、うまくいきません。 document.form1.str.click(); を document.form1.C1.click(); とするとうまく動きます。 よろしくお願いします。
- ベストアンサー
- JavaScript
- インラインフレーム＋ランダム表示
インラインフレームの中をランダム表示させたいのです。 そこで、大元のページに <iframe src="○○○.html" width="570" height="300"name="AAA"align="left" frameborder="no" scrolling="no" > このページはインラインフレームを使用しております。 未対応ブラウザは閲覧できませんのでご了承下さい。 </iframe> と記述し、○○○.htmlの中には <html> <head> <title></title> <script language="JavaScript"><!-- jpURL = [ "tk1.html", "tk2.html", "tk3.html", "tk4.html" ]; n = Math.floor(Math.random() * jpURL.length); document.write('<frameset>'); document.write('<frame src="'+jpURL[n]+'" name="rightFrame">'); document.write('</frameset>'); // --></script> </head> </html> という記述をしています。 このようにランダムに表示できるように記述すると、左横に出る窪んだようになる縦線（frameborder！？）と縦のスクロールバーが出てしまいます。 これを表示しないようにしたいのですが、どうやっても消す事が出来ません。 これを無くし自然な感じにするには、どのようにしたら良いでしょうか？ 是非教えてください。 宜しくお願いします。
- ベストアンサー
- HTML
- 引数のある関数をhtml読み込み後に実行
次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；
現在ホームページを制作中で、初めてインラインフレームを使って制作しています。 まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。 それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。 何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。
- 締切済み
- HTML
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
- インラインフレームの、リンク先のページに対応した高さ可変
私のサイトで、題名のとおりの方法をしてしており、 現在、以下を利用して、可変が可能になっています。 function GetHeight(ID,NAME) { if (document.height) { document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ; } else { document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px"; } } 通常の場合はこれで大丈夫です。 しかし、リンク先のページにインラインフレームを使用していると、どうしてもうまくできません。 一番前に index.html。index.htmlの中にiframeとして、main.htmlを、 main.htmlの中にiframeとして、higumain.htmlをおいています。 それぞれのiframeを可変可能にしたいのですが、 index.htmlの中のiframe「main.html」がうまく可変されません。 index.htmlのiframe は、他のiframeを移用していないリンク先なら可変しました。 何故でしょうか。解決法、教えてください。 上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。 何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。
- ベストアンサー
- JavaScript
お礼
ご指摘の通りparentの使い方を間違えていました。 <a onclick～で関数を呼び出すときに、func('Frame1','ID1')ではなくfunc(Frame1,'ID1')とすれば良いということですね。 早速試してみます。 ご回答ありがとうございました。