IEで子ウインドウから親ウインドウへのタグの追加
- 親ウインドウからポップアップで子ウインドウを出して、その子ウインドウ内でチェックしたものを親ウインドウの<select>タグに<option>タグとして付け加えること。
- 同じくhiddenタグでチェックしたもののvalueを持たせたいということ。
- IEではこの挙動ができませんでした。
- ベストアンサー
IEで子ウインドウから親ウインドウへのタグの追加
IEで子ウインドウから親ウインドウへのタグの追加 【やりたいこと】 1.親ウインドウからポップアップで子ウインドウを出して、その子ウインドウ内でチェックしたものを親ウインドウの<select>タグに<option>タグとして付け加えること。 2.同じくhiddenタグでチェックしたもののvalueを持たせたいということ。 とあるサイトを参考に、firefoxではこの挙動ができました。 ただ、IEだと親ウインドウに何も反映されなくて困っています。 以下ソース（一部）です。 --親html-- <head> <script type="text/javascript"> <!-- var w = window; function openWin(url) { if ((w == window) || w.closed) { w = open(url, "_blank", "width=800,height=600,scrollbars=yes"); } else { w.focus(); } return(false); } // --> </script> </head> <body> <select id="selectArea" size="5" name="search_area" class="list_box"> (ここに1.) </select> <div id="search_area"> (ここに2.) </div> <input type="button" onClick="return openWin('checkbox.php')" value="チェックをつける"> </body> --子html-- <input type="checkbox" name="department" value="c1" onclick="BoxCheckChild(this)"> <input type="checkbox" value="t1" onclick="BoxCheckChild(this)"> <input type="checkbox" value="s1" onclick="BoxCheckChild(this)"> 子htmlでは、onclickでチェックしたチェックボックスに対して処理をしています。 --javascript-- function appendOptionLast(str, value){//親ウインドウに<option>として追加(1.) var elOptNew = window.opener.document.createElement('option'); elOptNew.text = str; elOptNew.value = value; var elSel = window.opener.document.getElementById('selectArea'); var nstr = "<option value=aaa>test</option>" try { elSel.add(elOptNew, null); } catch(ex) { elSel.add(elOptNew) } function make_hidden(value){//hiddenタグ作成、追加(2.) var q = document.createElement('input'); q.type = 'hidden'; value = value.slice(1); if(type == "c"){ q.name = 'department[]'; }else if(type == "t"){ q.name = 'theme[]'; }else if(type == "s"){ q.name = 'index[]'; } q.value = value; window.opener.document.getElementById("search_area").appendChild(q); } となっています。 ソース、説明ともにわかり辛いかもしれませんが、どなたかわかる方いたら助けてもらえるとありがたいです。
- valanty
- お礼率61% (21/34)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEでは子Windowから親へappendChild出来ないみたいですね。 innnerHTMLは出来るみたいなのでそちらを使えば出来ました。 あなたのBoxCheckChild()の中身が解らないので、なんともいえませんが value.slice(1)ってのは変な気がします。 子htmlのjavascript部分を改造してみました。 --子html-- <body> c1<input type="checkbox" name="department" value="c1" onclick="BoxCheckChild(this)"> t1<input type="checkbox" value="t1" onclick="BoxCheckChild(this)"> s1<input type="checkbox" value="s1" onclick="BoxCheckChild(this)"> </body> --script----(全角空白は半角空白へ) function BoxCheckChild(elm){ if(elm.checked==true){ appendOptionLast(elm.value,elm.value); make_hidden(elm.value); } } function appendOptionLast(str, value){ var elOptNew = window.opener.document.createElement('option'); elOptNew.text = str; elOptNew.value = value; var elSel = window.opener.document.getElementById('selectArea'); var nstr = "<option value=aaa>test</option>" try { elSel.add(elOptNew, null); } catch(ex) { elSel.add(elOptNew) } } function make_hidden(value){ var input; type = value.slice(0,1); if(type == "c"){ input='<input type="hidden" name="department[]" value="'+value+'">'; }else if(type == "t"){ input='<input type="hidden" name="theme[]" value="'+value+'">'; }else if(type == "s"){ input='<input type="hidden" name="index[]" value="'+value+'">'; } window.opener.document.getElementById("search_area").innerHTML+=input; }
その他の回答 (1)
- Chaire
- ベストアンサー率60% (79/130)
Node は必ず、自分を生成してくれた 1 個の Document と結び付いています。Node は Document の文脈で「生きて」おり、Node に変更が加えられるや直ちに Document に通知されて、関連する他の Node などをアップデートします。 ゆえに、異なる Document に属する Node を取り込むときは Document::importNode を通さねばなりません。 var q = document.createElement('input'); q = window.opener.document.importNode(q, true); // ※ window.opener.document.getElementById("search_area").appendChild(q); あるいは、最初から必要な Document 上で Node を生成すれば良い。 var q = window.opener.document.createElement('input'); // ※ window.opener.document.getElementById("search_area").appendChild(q); 歴史的理由により、Firefox などでは importNode を通さずとも異なる Document に属する Node を取り込めてしまいますが、DOM 規定上は正しくありません。MDC のリファレンスにも importNode を通すよう注意書きがあります。 --- ここで、もう一つの問題があります。IE が importNode を持っていないことです。 やりようはいくつかありますが、この場合は No.1 の言うように innerHTML を使うのが無難です。と言うのは、IE7 以下では、一度生成し終えたフォームコントロールの name 属性は変更できない（表面上は変わっても内部的に変更されていない）という不具合があるからです。 > q.name = 'department[]'; > q.name = 'theme[]'; > q.name = 'index[]'; 上記は IE7 以下で反映されていないはずです。これの回避策もいくつかありますが、importNode 問題を考慮しつつ innerHTML を通すのが、手っ取り早いでしょう（ただ、innerHTML を += で連結すると場合によっては大変なことになるので、工夫して下さい）。 --- ついでですが、 > elOptNew.text = str; DOM2-HTML 規定に目を通せばお分かりのように、HTMLOptionElement::text は読取専用です。text を書き換えられるのは、古い JavaScript 1.1 の Option オブジェクトの仕様です。もっとも、DOM-HTML5 は後者に合わせて仕様変更しましたが。
お礼
うーん・・・ いろいろ制約？があるんですねー・・・ このサイトを参考に自分でも勉強してみます！
関連するQ&A
- 子ウインドウのカート送信時に親ウインドウに結果表示したい
親ウインドウからカート表示する子ウインドウ開き、 カートの送信ボタンを押した後、子ウインドウには カートを表示したままで、親ウインドウにカートを 表示したいのです。通常のカートだと送信ボタンを押すと そのウインドウにカート内容が表示されてしまいます。 子ウインドウ <form action="http://www.****.cgi" method="post"> <input type="hidden" name="_shop_id" value="****"> <select name="_item"> <option value="商品A\200">商品A \200 </select> <input type="hidden" name="_zaiko" value=""><select name="_num"> <option value="1">1 <option value="2">2 <option value="3">3 </select> <BR> <input type="hidden" name="_memo1"><input type="hidden" name="_memo2"> <input type="hidden" name="_memo3"> <input type=hidden name="ORDSTEP" value="step1"> <input type="submit" value="買い物カゴへ"></form> 親ウインドウ <script language="JavaScript"> <!-- var openWin ; //--> </script> </HEAD> <BODY> <DIV style="width : 42px;height : 16px;top : 55px;left : 157px; position : absolute; z-index : 1; " id="Layer1"><input type ="button" value ="OPEN" onclick ="openWin = window.open('testcart1.htm', '', 'width=400,height=400');" 以上よろしくお願いします。
- ベストアンサー
- JavaScript
- 子から親へチェックボックスの値を渡す
親ウィンドウに <input type="text" size="30" value="製品名" name="disp_product" onClick="window.open('./search.php','search','menubar=no,height=500,width=800');"> というテキストフォームがあり、フォーカスされた際にsearch.phpが子ウィンドウとして開くよう設定してあります。 search.phpには <input type="checkbox" name="sample1" value="sample1">sample1 <input type="checkbox" name="sample1" value="sample2">sample2 <input type="checkbox" name="sample1" value="sample3">sample3 ・ ・ ・ <input type="checkbox" name="sample1" value="sample50">sample50 とあります。 この中でチェックされたものの値を「/」でつなげて、 親ウィンドウのテキストフォームに入力された状態にしたいと思っています。 が、一つの値を入力させるところまではできましたが、複数をとなるとできません。 どのようにしたらいいのでしょう。 現在、子ウィンドウのjavascriptは function ich(n) { window.opener.document.myForm.disp_product.value=document.getElementById("sample1").value; window.close(); } と記述してあります。 この場合は「sample1」が渡されるのはわかりますが、やはり複数を渡すというのがわかりません。
- ベストアンサー
- JavaScript
- window.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するには
window.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するにはどうしたらよいのでしょうか。 子ウィンドウから <INPUT TYPE="button" value=\"実行\" onClick=opener.document.jikkou();> や <INPUT TYPE="button" value=\"実行\" onClick=opener.jikkou();> 等のボタンを作ってみましたが、無反応でした。 すいません。宜しくお願いします。
- ベストアンサー
- JavaScript
- 子ウインドウから親ウインドウのselectボックスを変更したい
行いたいことは郵便番号による住所検索です。 PerlとMysqlをつかって郵便データは取得します。 親ウインドウのテキストボックスに郵便番号を入れて、子ウインドウで都道府県と以下住所を表示させます。 入力ボタンというものを押すと、親ウインドウの都道府県selectボックスと住所テキストボックスに入力させたいというロジックです。 ////////親フォーム////////////// <SCRIPT language="JavaScript"> function OpenZipWin1(){ var Myzip =document.fm.zip1.value; window.open("hoge.cgi?mode=zip_search&zipcode=" + Myzip,"new","width=500,height=270"); } </SCRIPT> <form action="hoge.cgi" method=post name="fm"> <input type=text name=zip1 size=10 maxlength=8 value=""><a href="javascript:void(0);" onClick="OpenZipWin1();">検索</a><br> <select name="pref"> <option value="">都道府県選択</option> <option value="1">北海道</option> <option value="2">青森県</option> <option value="3">岩手県</option> <option value="4">宮城県</option> <option value="5">秋田県</option> <option value="6">山形県</option> ・・・・ <option value="47">沖縄県</option> </select> <input type=text name=add value="" size=60> </form> ////////子フォーム////////////// <SCRIPT language="JavaScript"> function setForm() { var Mypref = document.subForm.pref.value; window.opener.document.？？？？？？？？？？ = Mypref; var Mycity = document.subForm.city.value; window.opener.document.fm.add.value = Mycity; } //--> </SCRIPT> <p>検索結果</p> <form name="subForm"> <table border="0" cellpadding="5"> <tr> <td nowrap>郵便番号</td> <td>110-0001</td> </tr> <tr> <td>住所</td> <td> <input type="text" name="pref" size="20" value="東京都"> <input type="text" name="city" size="60" value="台東区 谷中"></td> </tr> </table></form> <p align=center><input type="submit" value="入力" onclick="javascript:setForm();self.close()"></p> <p align=center><a href="#" onclick="javascript:window.close()">閉じる</a></p> 問題なのは子ウインドウは都道府県が日本語で、親ウインドウはselectのvalueは数値、要素の方が日本語なのです。 子ウインドウの値を親ウインドウの要素の方と合わせたいのです。 上記の子ウインドウのJavaScriptで window.opener.document.？？？？？？？？？？ = Mypref; の部分でうまくすればいいのかな・・・とは考えてみたもののうまくいきません。 恐れ入りますがご教授おねがいできませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 子ウィンドウから親ウィンドウのチェックボックス
おそれいります。 現在、子ウインドウで、window.opener.document.getElementById('text1').value='4444'; window.opener.document.getElementById('text2').value='こんにちは'; window.opener.document.getElementById('text3').value='今日は晴れ'; として、親ウィンドウで <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> へ値をセット出来ているのですが、 この記述の流れで親ウィンドウのチェックボックスを子ウィンドウからtrueにすることはできるでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
- 親ウィンドウで動的に作成したhidden値をサブウィンドウから削除
QNo.4132708 複数のボタンに対するActionと動的hiddenについて で皆様に色々とアドバイスを頂いたものです。 しかし根本的な解決には至らず、また、皆様のお知恵を頂きたく 思います。 現在の問題点としてはサブウィンドウ側でtarget属性とname属性の 削除をonload時に行おうとしていますが、Firefoxだとうまくいき、 IE6だとうまくいかないことまではわかりました。 IE6でもうまくいくようにするにはどうしたらよいか お知恵をいただければ幸いです。 IEだとremoveChildがうまくいかないようなので、その他方法があれば よろしくお願い致します。 =====================機能 ここから===================== 入力内容を確認する画面があり、その画面からは実際にデータを 書き込む機能(1)と一時的に書込み、その結果を別ウィンドウで出力 するプレビュー機能(2)を考えています。 (1)も(2)もAction先は同じCGIで、プレビューの場合のみあるhidden値を 持たせ、Action先のCGI側でそのhiddenが存在すればプレビュー機能(2)、 なければ通常登録機能(1)と処理を分けています。 =====================機能 ここから===================== =====================画面 ここから===================== ※<>はHTMLタグを示す <form> 確認画面 ----------+---------------------------------+ |データ１ | 入力内容１ | +-------------------------------------------+ |データ２ | 入力内容２ | ----------+---------------------------------+ |データ３ | 入力内容３ | +-------------------------------------------+ +--------------+ +--------------+ | プレビュー | | 登録 | +--------------+ +--------------+ <input type="hidden" name="data1" value="入力内容１" /> <input type="hidden" name="data2" value="入力内容２" /> <input type="hidden" name="data3" value="入力内容３" /> </form> ※登録は以下で実行 <input type="button" value="登録" onClick="javascript: run();" /> ※プレビューは以下で実行 <input type="button" onClick="javascript: preview('30');" value="プレビュー" /> =====================画面 ここまで===================== =====================ＪＳ ここから===================== function preview(id){ var q = document.createElement('input'); q.type = 'hidden'; q.name = 'name'; q.value = id; newWindow =window.open("about:blank","preName","menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); newWindow.focus(); document.forms[0].appendChild(q); document.forms[0].target = 'preName'; document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); } function run(){ document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); return; } =====================ＪＳ ここまで===================== =====================サブウィンドウ側 ここから===================== <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);opener.document.forms[0].setAttribute('target', '');"> =====================サブウィンドウ側 ここまで=====================
- ベストアンサー
- JavaScript
- 親ウィンドウのリスト値変更
やりたいこと： 親ウィンドウからwindow.openで子ウィンドウを開き、 子ウィンドウのリスト値を親ウィンドウへ追加する Firefoxだと、ちゃんとできるのですが、IE7だと 『window.opener.document.resultData.sel.options[i] = newOption;』 の部分でサポートされてないプロパティまたはメソッドとエラーが出ます。 同じウィンドウでテストしてみるとちゃんと動くので、 window.openerがまずいのか [子ウィンドウ] function sendDate() { list=new Array; list[0]="apple"; list[1]="orange"; for(i=0; i<Cnt; i++){ var newOption = new Option(); newOption.text = list[i]; newOption.value = i; window.opener.document.resultData.sel.options[i] = newOption; } ※window.opener.document.resultData.sel.options[i]=new Option(list[i],list[i]); でも同じ結果でした。 [親ウィンドウ] <form id=resultData name=resultData> <select name=sel id=sel> <option value="">--選択--</option> </select> </form> どなたか原因わかりましたら、ご伝授願います。 ※PHP、smarty使用してます。
- ベストアンサー
- JavaScript
- セレクトボックスとチェックボックスを使った絞込み検索
Yomi-Searchについての質問なのですがタイトルの通りの質問でチェックボックスを使った絞り込み検索では 01_03 04_01 と検索結果に表示されるのですがセレクトボックスとチェックボックスを組み合わせて絞り込み検索をしてみると 01_0304_01 とこのようにカテゴリとカテゴリの間にスペースが入らず絞り込み検索が出来ません‥ タグはこのように書きました。 <FORM action="http://www..." method="get" target="" name="form1"> <INPUT type="hidden" name="mode" value="search"> <INPUT type="hidden" name="page" value="1"> <INPUT type="hidden" name="sort" value="mark"> <INPUT type="hidden" name="engine" value="pre"> <INPUT type="hidden" name="kn" value="30"> <SELECT size="1" name="word"> <OPTION type="selected" value="">--------</OPTION> <option value="01_01" name="word1">○○○</option> <option value="01_02" name="word2">○○○</option> <option value="01_03" name="word3">○○○</option> </SELECT><BR> <BR> <INPUT type="checkbox" name="word4" value="04_01">○○○<BR> <INPUT type="checkbox" name="word5" value="04_02">○○○<BR> <INPUT type="checkbox" name="word6" value="04_03">○○○<BR> <BR> <INPUT type="submit" value=" 検 索 "> <INPUT type="reset" value="リセット"> </FORM> 全くの初心者ですいませんが良きアドレスなどをお願いします。
- 締切済み
- HTML
- 子ウィンドウから親ウィンドウのテキストフィールドにデータを表示する
子ウィンドウのリンクをクリックするとそのリンクの内容が親ウィンドウのテキストフィールドの中に表示されるというのを作りたいのですが、 親ウィンドウ <html> <head> <title>サブウィンドウから親ウィンドウのテキストフィールドにデータを表示する</title> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> </head> <body> <a href="javascript:;" onClick="MM_openBrWindow('subwindow.html','','width=160,height=160')">open</a> <form name="myFORM"> <input type="text" name="tBox"> </form> <form name="myFORM2"> <input type="text" name="tBox2"> </form> </body> </html> 子ウィンドウ <html> <head> <title>サブウィンドウから親ウィンドウのテキストフィールドにデータを表示する</title> <script Language="JavaScript"> <!-- function setData() { window.opener.document.myFORM.tBox.value="灯油ストーブ"; } function setData2() { window.opener.document.myFORM2.tBox2.value="シャワー"; } // --> </script> </head> <body> <a href="#" onClick="setData()">灯油ストーブ</a> <a href="#" onClick="setData2()">シャワー</a> </body> </html> これではリンク数とテキストフィールド数が同じじゃないといけないですよね。 作りたいのはテキストフィールドは15個あって、リンクの方は70個ぐらいあります。リンクをクリックするとテキストフィールドの中へ順々に表示させたいのですが、どうしたらよいのでしょうか？ どうかアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- フレームを使ったサブウィンドウから親ウィンドウへのデータセット
下記のソースをフレームを使わないサブウィンドウから実行すると うまく親ウィンドウの該当項目へセットできますが、 フレームをつかったサブウィンドウからだとうまくセットできません。 ご存知の方おりませんか？ よろしくお願いします。 function setData(theData) { window.opener.document.MAIN_FORM.DATA0.value = theData[0]; window.opener.document.MAIN_FORM.DATA1.value = theData[1]; window.opener.document.MAIN_FORM.DATA2.value = theData[2]; window.opener.document.MAIN_FORM.DATA3.value = theData[3]; window.opener.document.MAIN_FORM.DATA4.value = theData[4]; } <input type="button" onClick="setData(Array('000','111','222','333','444'))" value="選択">
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます！ おかげでIEでもきちんと動作しました。