0
ドキュメントDOMに新しい要素を送信するためにWebサービスを試しています。ブラウザは追加された子ノードをレンダリングしません
私はその仕事を行うのに必要な情報を使ってサーバー側でXMLを準備しています。以下のように私のサーバー側のXMLは次のとおりです。
<Root>
<Command>Add
<Data><button id="PB" style="width:600px; height:100px;"/></Data>
</Command>
</Root>このXMLは、ページを次のようにキャッチされ。 XMLには、コマンドIDが "Add"であることがわかります。これは、データの下にあるノードをページに追加する必要があります。
コードが実行されているとき、ボタンはドキュメントDOM（コード関数onMessageを参照）で正しく作成され表示されますが、レンダリングされません。 ブラウザのデバッガは、ボタンの幅と高さがNullと思われることを伝えます。ブラウザデバッガで属性を編集すると、変更後にボタンがレンダリングされます。 ChromeとIEでこの動作が発生します。
ヒントが必要ですが、実行するために変更する必要があります。解決
<!DOCTYPE html>
<meta charset="utf-8" />
<script language="javascript" type="text/javascript">
var wsUri = "ws://localhost:8002/chat";
var output;
var websocket;
"use strict";
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.binaryType = "arraybuffer";
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt) {
writeToScreen("CONNECTED");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
var parser, xmlDoc, NodeCommand, but;
parser = new DOMParser();
xmlDoc = parser.parseFromString(evt.data, "text/xml");
NodeCommand = xmlDoc.getElementsByTagName("Command");
switch (NodeCommand[0].textContent) {
case "Add":
output.appendChild(NodeCommand[0].childNodes[1].childNodes[0]);
break;
}
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<h2>WebSocket Test</h2>
<div id="output"></div>
</body>
</html>