如何将 document.body 保存到变量并再次从该变量加载

Question

jQuery 中的$("body").load("myUrl") 函数允许将文件的html 内容加载到body 中，这样body 中的html 文件中的所有脚本都会被正确加载并执行。 如何将变量中的 html 内容提供给正文，而不是从文件中加载。例如，考虑一下：

在index.html中：

  <script>
        window.keeper = null;  


        function callForm2() {

            window.keeper = window.document.body;

            $("body").load(
                "Form2.html"
            );

        }


        function closeForm2() {

            window.document.body = window.keeper;

        }
    </script>

在callForm2在从文件调用body内容之前，当前body内容存储在一个window.keeper变量中。

在 closeForm2() 中，我想从 window.keeper 变量（旧正文内容）中获取内容并设置为当前正文，在这种情况下，变量的内容不等于之前保存的，无法返回变量的原始内容。

那么如何保存变量的当前正文内容以供下次调用？ 这种情况下保存和调用的正确方法是什么？

这是我的代码：（你也可以看https://github.com/yarandish/Challenge2）

Answer 1

我解决了你的问题并将演示放在这里。 您的解决方案在这里： https://github.com/Master2V/FormCallSolution.git

在 index.html 中将这个脚本放在 head 中：

    <script>

    window.keeper = null;

    function callForm2() {

        var $body_page = $('body #Page');
        window.keeper = $body_page;
        $body_page.detach();

        $.ajax({
            type: "GET",
            url: "Form2.html",
            data: "",
            dataType: "html",
            success: function (response) {
                $("body").html(response);
            }
        });
    }

    function closeForm2() {

        var $body_page = $('body #Page');
        $body_page.detach();
        
        var $body = $('body');
        $body.append(window.keeper);

    }

</script>

并且您必须在 index.html 和您要调用的任何其他表单中有一个 id="Page" 的 div 标签。

Answer 2

考虑以下内容。

window.keeper = {};
$(function() {
  $("#psudo_body > p").click(function() {
    window.keeper.html = $("#psudo_body").html();
    window.keeper.text = $("#psudo_body").text();
    console.log("Stored", window.keeper);
    var form = $("<form>", {
      id: "myForm"
    });
    $("<button>", {
      type: "submit"
    }).html("Done").appendTo(form);
    $("#psudo_body").html(form);
  });

  $("body").on("submit", "#myForm", function(event) {
    event.preventDefault();
    $("#psudo_body").html(keeper.html);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="psudo_body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum elit sit amet mi molestie, ac commodo nibh blandit. Proin a tellus efficitur dui commodo varius. Nullam massa nunc, mollis in finibus ac, volutpat eu urna. Maecenas quis sodales
    felis, non finibus lorem. Aliquam tristique, dolor vitae consequat commodo, augue sem porta ex, eu tincidunt lectus orci ut elit. Integer nec enim eu erat pulvinar pretium eu id lorem. Sed et dapibus ligula, a rhoncus augue. Fusce et purus in diam
    aliquet accumsan. Curabitur mattis, ante quis tempor luctus, ante sapien dignissim metus, sit amet maximus ante lorem eu turpis. Praesent in sodales velit. Suspendisse varius ornare faucibus. Suspendisse maximus erat sodales, tincidunt nulla sit amet,
    fermentum ligula. Donec sed sollicitudin nunc. Phasellus vitae mauris bibendum, fringilla orci id, sodales libero. Donec at ullamcorper lectus. Proin dui enim, venenatis quis euismod vulputate, blandit sit amet nibh.</p>
</div>

这也适用于body 元素。

你也可以用类似的方式使用.data()。

$(function() {
  $("#psudo_body > p").click(function() {
    $("#psudo_body").data("keeper", $("#psudo_body").html());
    var form = $("<form>", {
      id: "myForm"
    });
    $("<button>", {
      type: "submit"
    }).html("Done").appendTo(form);
    $("#psudo_body").html(form);
  });

  $("body").on("submit", "#myForm", function(event) {
    event.preventDefault();
    $("#psudo_body").html($("#psudo_body").data("keeper"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="psudo_body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum elit sit amet mi molestie, ac commodo nibh blandit. Proin a tellus efficitur dui commodo varius. Nullam massa nunc, mollis in finibus ac, volutpat eu urna. Maecenas quis sodales
    felis, non finibus lorem. Aliquam tristique, dolor vitae consequat commodo, augue sem porta ex, eu tincidunt lectus orci ut elit. Integer nec enim eu erat pulvinar pretium eu id lorem. Sed et dapibus ligula, a rhoncus augue. Fusce et purus in diam
    aliquet accumsan. Curabitur mattis, ante quis tempor luctus, ante sapien dignissim metus, sit amet maximus ante lorem eu turpis. Praesent in sodales velit. Suspendisse varius ornare faucibus. Suspendisse maximus erat sodales, tincidunt nulla sit amet,
    fermentum ligula. Donec sed sollicitudin nunc. Phasellus vitae mauris bibendum, fringilla orci id, sodales libero. Donec at ullamcorper lectus. Proin dui enim, venenatis quis euismod vulputate, blandit sit amet nibh.</p>
</div>

另请参阅：Storing a variable in the JavaScript 'window' object is a proper way to use that object?