IEで子ウインドウから親ウインドウへのタグの追加

Question

IEで子ウインドウから親ウインドウへのタグの追加【やりたいこと】 1.親ウインドウからポップアップで子ウインドウを出して、その子ウインドウ内でチェックしたものを親ウインドウの (ここに1.)

(ここに2.)

--子html-- 子htmlでは、onclickでチェックしたチェックボックスに対して処理をしています。 --javascript-- function appendOptionLast(str, value){//親ウインドウに" 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); } となっています。ソース、説明ともにわかり辛いかもしれませんが、どなたかわかる方いたら助けてもらえるとありがたいです。

yyr446 · Accepted Answer

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;
}

Chaire · Answer

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 は後者に合わせて仕様変更しましたが。

参考URL：https://developer.mozilla.org/ja/DOM/document.importNode

IEで子ウインドウから親ウインドウへのタグの追加

IEでは子Windowから親へappendChild出来ないみたいですね。

Node は必ず、自分を生成してくれた 1 個の Document と結び付いています。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング