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

标签 javascript html elements transfer

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

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

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

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

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

最佳答案

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

  • 你创建一个循环以通过标签获取元素(以获取所有输入)
  • 您根据类型处理它们:textcheckboxradio...通过将值保存在属性中(在我的例子,我使用值更新了默认值)
  • 然后按您希望的方式发送。在我的示例中,我使用 alert 显示内容;但请使用您的 socket 。

也许你需要在接收页面添加一些处理。 文本输入将显示默认值,但您可能必须从“值”属性中设置复选框“选中”。我会使用一个 document.onload,每个都有一个 (通过标签获取元素)

例子如下: 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>

关于javascript - 无论如何,是否可以将 html 元素从一个客户端传输到另一个客户端,同时保留每个输入的值,例如在文本框中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31002991/

相关文章:

javascript - 奇怪的三元运算符Javascript

javascript - 在 Controller 中更新 $scope 不会更新指令?

javascript - 如何让div像弹出窗口一样隐藏和显示?

html - 影响父级高度的 CSS 嵌套列表

html - CSS媒体打印背景图片

javascript - 用文本填充复杂的多边形 - CSS 排除的任何 JS(或其他)替代方案?

selenium - nightwatch selenium 命令 "elements"返回有关第一个参数的错误,即使我传入了 css 选择器或 xpath 表达式

Javascript - 如何获取所有元素并对每个元素做同样的事情

javascript - jQuery:需要 "refresh"一个小部件

python - 比较两个numpy数组