在文档之间移动整个 html 页面上下文

Posted 2023-03-05

【中文标题】在文档之间移动整个 html 页面上下文

【英文标题】：Moving entire html page context between documents

【发布时间】：2014-06-23 23:04:49

【问题描述】：

有没有办法将整个 dom（javascript 状态、文档状态、所有内容）从一个文档移动到另一个文档？

我的第一个想法是使用iframe，但显然你不能在不重新加载的情况下在 dom 周围移动 iframe。

我的第二个想法是对 window 对象做一个深拷贝，但显然这样做很耗时，有很多陷阱，并且不处理 dom 状态。

可以这样做吗？我基本上想对一个文档进行沙箱处理，然后将其状态移动/复制到另一个文档。

仅供参考，它是一个 node-webkit 应用程序。我想将 dom 从一个窗口复制到另一个窗口。

例如我可以这样做：

window2.document = window1.document; window2.document.body.innerhtml( window1.document.body ); //dont know the syntax

【参考方案1】：

不，HTTP 是一种无状态协议，因此在 HTML 文档之间移动状态没有多大意义。

我建议研究单页应用。让单个 HTML 文档处理状态。然后根据需要发出 AJAX 请求以部分更新数据。

【讨论】：

你能看看我的编辑吗？这是最后4行。我曾考虑将整个状态存储在localStorage 或类似的东西中，但我更愿意能够复制所有内容，这样我就不必担心诸如部分填写的表单数据之类的事情.

【参考方案2】：

您可以将整个页面以 json 格式存储在 cookie 中。如果页面太大，您可能必须使用多个 cookie。然后在下一个文档上加载页面和您需要的任何值。这是我以前使用过的一些javascript来执行此操作。它将遍历表单中的每个元素，并将其以 json 格式保存到 cookie 中，格式为 controlId:controlValue。

    function SaveFormInCookies(formId) 
    var saveToCookies = ;
    $('#' + formId + ' :input').each(function () 
        if ($(this).is(':visible'))  // Only save visible form items
            if (($(this).val().length > 0) && ($(this).is(':input[type="submit"]') == false)) 
                saveToCookies[$(this).attr('id')] = $(this).attr('value');
            
        
    );
    var elementsToSave = JSON.stringify(saveToCookies); // Convert object array of controls and values into a json string
    var splitForm = elementsToSave.match(/.1,3000/g); // Make sure each cookie only hold up 3000 characters. Leave plenty of overhead as cookie size varies depending on browser
    for (var i = 0; i < splitForm.length; i++) 
        setCookie("MGIncForm" + i, splitForm[i], 1); // Save as many cookies as needed
    


/*
This function is resposible for actually saving the cookies
*/
function setCookie(cookieName, value, expireHours) 
    var exdate = new Date().addHours(expireHours);
    var cookieValue = escape(value) + ((expireHours == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = cookieName + "=" + cookieValue;

在下一页，检查 cookie 是否存在并反序列化。

【讨论】：

说我做window.foo = 4; 我想要一些东西，当我复制/移动文档时，它仍然会具有滚动位置等内容。这就是为什么移动 iframe 是理想的，因为它是沙盒的，所有状态（javascript 和 dom 也是如此）都是独立的。可悲的是，我认为序列化整个窗口对象并不适合我正在尝试做的事情。不过感谢您的回答。

您可以将滚动位置和其他任何内容存储为变量并将其移动到 cookie 中的下一页吗？我的意思是你必须确切地知道你设置和想要保留的内容，然后在另一个页面上再次设置值以匹配。

对。我希望有一个更优雅的解决方案。我试试看。

刚刚找到另一篇讨论相同内容的帖子 - 可能也有帮助 ***.com/q/9652070/853295。有人链接的那个草坪椅插件看起来很有前途！

我......我想你刚刚链接回这个问题：P