使用javascript“保存”当前页面状态答案

【问题标题】："save" current page state using javascript使用javascript“保存”当前页面状态
【发布时间】：2010-12-19 02:41:51
【问题描述】：

我想要做的是有一个函数创建一个 uri 锚来重绘/重新渲染/（调用它你想要的）整个页面

基本上，我希望能够将任何页面转换为 URI 方案，以便当我导航到这样的链接时，我可以按原样获取整个页面，有点像保存网页。例如，如果我要编辑一个页面并希望稍后恢复所有文本区域，就像它们一样并填写表格，或者如果我想保存某人（小）页面而不必担心他的网站会消失无需在我的计算机上保存文件（我想使用书签）

这是我目前所拥有的：

html = '<html>' + document.documentElement.innerHTML + '</html>';
//html = html.replace(/"/g, '\\"');
a = document.createElement('a');
a.href = 'data:text/html;charset=utf-8,' + html;
a.innerHTML = 'click here';
document.body.appendChild(a);

你明白我在做什么。好的，现在困难的部分是以某种方式使用正则表达式来替换所有已经在双引号中但不是不在双引号中的双引号。

例如，如果我们创建页面

<html><body>Testing</body></html>

并运行该函数足够多次，我们将在第 3 次和链接上遇到一些问题。

明白我的意思：http://jsfiddle.net/AvSh3/3/

【问题讨论】：

我修改了你的问题，希望更多能提供帮助的人能找到/理解它
我迫不及待地想看看这会发生什么。我真的不完全理解目标是什么，但有些事情告诉我结果会很酷。
是否要保存页面上的所有 JavaScript 变量以及 HTML 元素？

标签： javascript uri

【解决方案1】：

使用内置的 escape() 函数：

html = escape(html);

【讨论】：

【解决方案2】：

我把它改成了

var html = '<html>' + $("html").html() + '</html>';
$('<a></a>').html("click here")
.attr("href", 'data:text/html;charset=utf-8,' + escape(html))
.appendTo($("body"));

显示不正确，但查看源代码时一切正常。也许还需要一些其他特殊参数？

【讨论】：

实际上我正在寻找一个非 jQuery 的答案。我只是在 jsfiddle 中使用它，因为由于某种原因 window.onload 无法正常工作，我厌倦了试图弄清楚它。我猜双引号在其他双引号中时需要转义。除非有更好的方法来做这件事
@qwe - 两者似乎都适用于简单的示例。当我在更复杂的页面（使用 jQuery，Play 框架的一部分）中尝试时，即使源代码看起来不错，我也会遇到 javascript 错误和显示问题。不知道这笔交易是什么
第一个链接应该生成一个只有 Testing 的页面。下一个链接应该产生那个加上一个级别的链接，下一个链接应该更深一层并且......我们都知道递归是如何工作的。在这种情况下，第一个链接会生成一个包含 3 个链接的页面，下一个会再生成 1 个链接，下一个会再生成一个。
@qwe - 我没有那个。我使用$(document).ready(function() { ... }); 运行它。实际上，与您一起，我达到了四个，并且一直保持在那里
知道为什么吗？更好的是，知道如何解决它吗？我不喜欢使用 jQuery

【解决方案3】：

这在我自己的页面上测试时有效：

a = document.createElement('a');
a.href = 'data:text/html;charset=utf-8,<html>' +
    escape(document.documentElement.innerHTML) + '</html>';
a.innerHTML = 'click here';
document.body.appendChild(a);

我猜这只是 jsBin/jsFiddle 的技术问题，但我不知道为什么。无论如何，如果人们想用它来制作书签，链接如下：

....

我不知道如何在 SO 中创建书签链接，如果您只想使用此位置创建一个新书签：

javascript:a=document.createElement("a");a.href="data:text/html;charset=utf-8,<html>"+escape(document.documentElement.innerHTML)+"</html>";a.innerHTML="click here";document.body.appendChild(a);

无论如何，使用这个有趣的工具，我们可以像 Jon 在此处的第一个链接中所做的那样：

http://wundes.com/bookmarklets.html

【讨论】：