Question

此类问题之前已得到解答，但我仍然没有得到正确的解决方案。我的方法是获取＆＃39; body＆＃39;的html源代码。标记及其所有子项（动态创建），然后将它们保存在会话存储中。这样页面可以借助此缓存重新加载数据。

我完成了所有事情，只是坚持获取HTML源代码。

我可以通过以下方式获取HTML代码：

console.log($('body').html());
console.log(document.body.innerHTML);

body标签如下：

    <body>
    <input type="button" id="btnconsole" value="Get Html">
    <div id="divcontainer" style="background-color:blue; height:100%; width:100%;">
        <input type="text" id="textbox">
    </div>
</body>

但我没有得到＆＃39;价值＆＃39;输入标签的字符串。为了更好地理解：执行以下代码：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#btnconsole").on('click',function(){
                    console.log($('body').html());
                    //console.log(document.body.innerHTML);
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnconsole" value="Get Html">
        <div id="divcontainer" style="background-color:blue; height:100%; width:100%;">
            <input type="text" id="textbox">
        </div>
    </body>
</html>

现在在文本框中写一些内容，然后按＆＃34;获取Html＆＃34;按钮。现在检查控制台。会有html源但是＆＃34; textbox＆＃34;价值将不存在。

我知道我们可以通过.value获得输入值，但这将是一个不完整的解决方案。我正在寻找一些代码来获取body标签的完整源代码，包括动态创建/修改元素的值和属性。

Answer 1

我完全同意@nnnnnn对这个问题的评论......

我不会尝试通过保存HTML来保存应用程序状态，我会考虑将应用程序状态保存在JS对象中，然后保存该对象的序列化版本（JSON）。然后根据需要通过从状态对象中的值重新创建HTML来恢复状态。

然而，你可以做到以下几点来实现你想要的东西 - 它可能是我曾经看过的最蠢的东西......（不推荐）......

＆＃13;

$(document).ready(function() {
  $("#btnconsole").on('click', function() {
    $("input").each(function() {
      $(this).attr("value", $(this).val());
    });
    console.log($('body').html());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnconsole" value="Get Html">
<div id="divcontainer" style="background-color:blue; height:100%; width:100%;">
  <input type="text" id="textbox" value="initial">
</div>

＆＃13;

jquery html() does not return changed values

Answer 2

最后我做了一些努力...... 我正在使用的是domJSON

和

var elem =  document.getElementsByTagName('body')[0];

var o = domJSON.toJSON(elem);

console.log(JSON.stringify(o));

获取页面的html源代码，包括Jquery或Javascript动态创建的元素

2 个答案: