logo标签列表

使用JavaScript“保存”当前页面状态

javascripturi
6
我想要做的是创建一个函数，用于生成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>

如果我们运行函数足够多次，我们将会遇到第三个及以后的链接出现问题。

看看这个例子：http://jsfiddle.net/AvSh3/3/

我修改了你的问题，希望更多能够提供帮助的人能够找到它并理解它。 - Brad Mace
我迫不及待地想看看这会产生什么。我真的不完全明白目标是什么，但有什么东西告诉我结果一定很酷。 - Hemlock
您是否想保存页面上的所有JavaScript变量以及HTML元素？ - Anderson Green
3个回答
3

使用内置的escape()函数：

html = escape(html);
0

我已经重新制作了它

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没有起作用，而我已经厌倦了尝试弄清楚它。我猜想当双引号在其他双引号中时需要进行转义。除非有更好的方法来解决这个问题。 - qwertymk
1
@qwe - 在简单的例子中，两者都似乎可以工作。但是当我在一个更复杂的页面中尝试（带有jQuery，Play框架的一部分），即使源代码看起来很好，我也遇到了JavaScript错误和显示问题。不确定出了什么问题。 - Brad Mace
第一个链接应该生成一个页面，只有<html><body>Testing</body></html>。下一个链接应该生成这个加上一个级别的链接，下一个链接应该更深一层...我们都知道递归是如何工作的。在这种情况下，第一个链接生成一个带有3个链接的页面，下一个生成1个链接，下一个生成1个链接。 - qwertymk
1
@qwe - 我的上面没有那个。我是使用 $(document).ready(function() { ... }); 来运行它的。实际上，使用你的代码，我可以到达四，然后它就停在那里了。 - Brad Mace
有什么想法是为什么会这样？更好的是，有什么办法可以解决它？我不想使用jQuery。 - qwertymk
0

在我的页面上测试时，这个可以工作：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接