无论如何，是否可以将 html 元素从一个客户端传输到另一个客户端，同时保留每个输入的值，例如在文本框中？

Question

假设我有一个包含一些 html 元素的页面。这些元素是 textboxes ,checkboxes ,radiobuttons 和其他用户响应的东西。

我需要将整个页面从客户端 1 传输到客户端 2 的可能性，这样客户端 2 就会看到客户端 1 设置到 html 元素中的所有内容。

我为此使用了 WebSocket 技术，但我不知道如何传输这些元素。如果我传输 document.body.innerHTML 然后 client2 看到空白元素，而不是填充元素。

页面上可以有任意数量的任意 html 元素。是否可以通过 websocket 执行类似克隆元素的操作？就像我序列化整个 document.body 并将其传输给另一个客户端？

页面很简单html。没有使用任何服务器端脚本。我使用在同一端口上工作的自制 http + websocket 服务器。

Answer 1

您需要使用 outerHTML 而不是 innerHTML，但是这不会设置您的输入值，因此您必须手动执行此操作。

// To send your html via websocket
//var ws = new WebSocket('ws://my.url.com:PORT');
//ws.onopen = function(event) { // Make sure it only runs after the web socket is open

  document.querySelector('button').addEventListener("click", function() {
    var inputs = document.querySelectorAll('input');
    Array.prototype.forEach.call(inputs, function(el, i) {
      el.setAttribute('value', el.value);
    });
    document.querySelector('button').setAttribute('data-button', true); // Attributes are rememebered
    var HTML = document.querySelector('section').outerHTML;
    document.querySelector('#result').innerHTML = HTML;
    document.querySelector('#resulttext').textContent = HTML;

    //ws.send(HTML);
  });

//};

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div {
  background: orange;
  border: 3px solid black;
}

<section>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <button>Generate</button>
  </div>
</section>
<p id="resulttext"></p>
<p id="result"></p>

Answer 2

我开始了一些可以帮助你的事情。

你做一个循环来通过标签获取元素（以获取所有输入）
您根据类型处理它们：text、checkbox、radio、...通过将值保存在属性中（在我的示例中，我更新了默认值使用值)
然后你按照你想要的方式发送它。在我的示例中，我使用 alert 显示内容；但请使用您的套接字。

也许您需要在接收页面上添加一些处理。文本输入将显示默认值，但您可能必须从 'value' 属性中设置复选框 'checked'。我会使用 document.onload 和 for each（按标签获取元素）

示例如下： Javascript get Body content into variable

<body>
<p class="first">Hello World Dude</p>
<label for="search_field">my text:</label>
<input type='text' id ='myinput' class='MyIntputField' />

  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
</body>
<p id="demo" onclick='myFunction()'>Click me to send Data.</p>
<script>
function myFunction() {
    inputs = document.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
        switch (inputs[index].type){
            case "text":
                inputs[index].defaultValue = inputs[index].value;
            break;

            case "checkbox":
                 inputs[index].value = inputs[index].checked;
            break;
        }
    }

    var $mybody = $("body").html();
}

</script>

无论如何，是否可以将 html 元素从一个客户端传输到另一个客户端，同时保留每个输入的值，例如在文本框中？

Is there anyway to transfer html elements from one client to another with keeping of every entered values like in textboxes?

html

javascript

elements

transfer