0
DOM을 문서에 새 요소를 전송하기 위해 웹 서비스를 실험하고 있습니다.브라우저가 추가 자식 노드를 렌더링하지 않습니다.
그래서 저는 서버 측에서 필요한 정보를 가지고 XML을 준비하고 있습니다. 내 서버 측 XML은 등 뒤에 :
<Root>
<Command>Add
<Data><button id="PB" style="width:600px; height:100px;"/></Data>
</Command>
</Root>이 XML은 페이지를 따라 잡은 것이다. XML에 페이지 아래에 노드를 추가해야하는 "추가"명령 ID가 있습니다.
코드가 실행 중이면 버튼이 문서 DOM에 제대로 만들어지고 표시됩니다 (코드 function onMessage 참조). 그러나 렌더링되지 않습니다. 브라우저 디버거에서 단추의 너비와 높이가 Null 인 것 같습니다. 브라우저 디버거에서 속성을 편집하면 단추가 변경된 후에 렌더링됩니다. 크롬과 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>