Я экспериментирую с веб-сервисом для передачи новых элементов в документ DOM.Браузер не создает дочерний узел
Итак, я готовлю XML на стороне сервера с необходимой информацией для выполнения этой работы. Мой стороне сервера XML является, как следует:
<Root>
<Command>Add
<Data><button id="PB" style="width:600px; height:100px;"/></Data>
</Command>
</Root>Этот XML будет поймано следующей странице. Вы увидите, что XML имеет идентификатор команды «Добавить», который должен добавить узлы ниже данных на страницу.
Когда код запущен, кнопка будет создана и правильно показана в документе DOM (см. Функцию кода onMessage), но она не будет отображаться. Отладчик браузера говорит мне, что ширина и высота кнопки кажутся нулевыми. Когда я изменяю атрибуты в отладчике браузера, кнопка будет отображаться после изменения. Я получаю такое поведение в 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>