急いでいます！

IEでのみ発生するJavaScriptエラー

締切済

質問者：ハムとソーセージ
質問日時：2015/10/13 18:38
回答数：2件

現在、親ウィンドウからwindow.openで子ウィンドウを開き、window.openの戻り値であるウィンドウオブジェクトを操作し、親ウィドウから子ウィンドウへdiv要素を追加しようとしていますが
JavaScriptエラーとなっておりうまく動作しません。

以下のようなJavaScriptを実行しています。

【親ウィンドウのJavaScript】
var url = "./child.html";
targetWindow = window.open(url, "chatWindow",
"width=250,height=350,menubar=no,status=no,scrollbars=no");
var contactInnerArea = targetWindow.document.getElementById('contactInnerArea');
var messageElement = $('<div class="sendbox">').text(value);
contactInnerArea.appendChild(messageElement);

以下の行で「catch ステートメントでは適用されますが、throw ステートメントでは適用されません。」のエラーが返ってきます。
contactInnerArea.appendChild(messageElement);

contactInnerAreaはデバッガで見たところ取得出来ているようです。
最初はjQueryのappendで実行していましたが、同様のエラーがjQuery内のappendChildで発生しておりました。

IEはバージョン11です。
ChromeとFirefoxでは正常に動作します。
解決策をご存知の方、お力添え頂けますでしょうか。

よろしくお願いいたします。

contactInnerArea.appendChild(messageElement[0]);
こちらにtry～catchを入れてみたところ「HierarchyRequestError」が出ておりました。IEのセキュリティエラーでしょうか。
同じような事象が発生している方がいらっしゃるようです。
http://stackoverflow.com/questions/23071968/jque …

補足日時：2015/10/14 15:22
通報する
[parent.htmlの一部]
function openChat(userId, userName) {
var url = "./child.html";
targetWindow = window.open(url, "chatWindow", "");
}
function sendMessage() {
var message = $("#inputMessage").val();
var messageElement = $("<div>" + message + "</div>");
var contactInnerArea = targetWindow.document
.getElementById('contactInnerArea');
contactInnerArea.appendChild(messageElement[0]);
}

補足日時：2015/10/14 15:27
通報する
[child.html]
<!DOCTYPE html>
<html>
<head>
<title>子ウィンドウ</title>
<meta charset="UTF-8">
</head>
<body>
<div id="contactInnerArea">aaaaa</div>
</body>
</html>

補足日時：2015/10/14 15:28
通報する
innerHTMLを使えば出来るようですが、
要素の追加的な動きをどのようにするかが不明です。
innerHTMLを使ってappendと同様の動きをする書き方が分かる方いらっしゃったらご教授頂ければ助かります。

補足日時：2015/10/14 16:02
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2015/10/14 16:13

動作は確認していないので申し訳ないですが、以下の3点に留意すれば解決できそうな気がします。

1）すでにANo1様がご指摘のように、ご質問のスクリプトではjQueryオブジェクトとDOM要素の混乱が見られます。
jQueryのメソッドにはjQueryオブジェクトを、DOMのメソッドにはDOM要素を用いるようにしてください。

2）新しいドキュメントを読み込みますので、スクリプトの実行のタイミングによっては、読込み終了前に実行される可能性があります。
念のため、document.readyState などで状況を確認しながら処理を行うようにした方が安全かと思います。
https://developer.mozilla.org/ja/docs/Web/API/Do …

3）ご提示の記述方法だと、異なるドキュメント間で要素の移動（orコピー）を行っています。
この場合はimportNodeやadoptNodeなどを利用する方が良さそうです。
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/Do …

IEは対応していなかったようですが、最近のものは対応しているのかも
https://msdn.microsoft.com/en-us/library/ms76752 …
https://msdn.microsoft.com/en-us/library/ff97520 …

一方、ご質問文でご提示の内容ならば、要素の移動などせずに子ウィンドウのドキュメント上で直接要素の生成などを行うことで、上記の移動等は不要にできるものと思います。

- 2
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
document.readyStateでドキュメントが読み込まれたかはチェックを入れる事にします。
元々jQueryのみを使ってDOM操作していましたが、jQueryがうまくいかないのでgetElementById等が出現し混乱した状態になってしまいました。参考になる情報ありがとうございます。
IEの場合でもinsertAdjacentHTMLメソッドを使いappendと同様の動きを実現する事が出来ました。

> この場合はimportNodeやadoptNodeなどを利用する方が良さそうです。
こちらも参考にさせて頂きます。

通報する

お礼日時：2015/10/14 17:04