在浏览器中更改URL而不使用JavaScript加载新页面

时间:2020-03-06 14:45:11  来源:igfitidea点击:

我将如何执行一个JavaScript动作,该动作可能会对当前页面产生一些影响,但同时也会更改浏览器中的URL,因此,如果用户点击重新加载或者添加书签,则会使用新的URL?

如果"后退"按钮将重新加载原始URL,那也将很不错。

我正在尝试在URL中记录JavaScript状态。

解决方案

我强烈怀疑这是不可能的,因为如果存在的话,那将是一个令人难以置信的安全问题。例如,我可以制作一个看起来像银行登录页面的页面,并使地址栏中的URL看起来像真实的银行!

也许,如果我们解释为什么要这样做,那么人们也许可以建议其他方法...

[2011年编辑:自从我在2008年写完这个答案以来,关于HTML5技术的更多信息已经曝光,只要该URL来自同一来源,就可以对其进行修改。]

如果我们希望它在不支持" history.pushState"和" history.popState"的浏览器中运行,则"旧"方法是设置片段标识符,这不会导致页面重新加载。

基本思想是将" window.location.hash"属性设置为包含所需状态信息的值,然后使用window.onhashchange事件,或者对于不支持" onhashchange"的旧版浏览器(即< 8,Firefox <3.6),定期检查哈希值是否已更改(例如,使用setInterval)并更新页面。我们还需要检查页面加载时的哈希值以设置初始内容。

如果我们使用的是jQuery,则有一个hashchange插件,它将使用浏览器支持的任何一种方法。我确定还有其他库的插件。

要注意的一件事是与页面上的ID冲突,因为浏览器将滚动到具有匹配ID的任何元素。

浏览器安全设置可防止人们直接修改显示的URL。我们可以想象会导致网络钓鱼的漏洞。

在不更改页面的情况下更改url的唯一可靠方法是使用内部链接或者哈希。例如:http://site.com/page.html变为http://site.com/page.html#item1. 此技术通常用于hijax(AJAX +保存历史记录)中。

这样做时,我通常只会使用哈希作为href的动作链接,然后使用jquery添加单击事件,这些事件使用请求的哈希来确定和委托动作。

我希望这能使我们走上正确的道路。

window.location.href包含当前URL。我们可以阅读它,可以添加到它,也可以替换它,这可能会导致页面重新加载。

如果听起来,我们想要在URL中记录javascript状态以便可以将其添加为书签,而无需重新加载页面,请在a之后将其添加到当前URL,并由onload事件触发一段javascript解析当前URL查看它是否包含保存状态。

如果使用?代替#,我们将强制重新加载页面,但是由于我们将在加载时解析已保存的状态,因此这实际上可能不是问题;这样一来,前进和后退按钮也将正常工作。

有一个Yahoo YUI组件(浏览器历史记录管理器)可以处理此问题:http://developer.yahoo.com/yui/history/

我想知道只要页面中的父路径是相同的,是否还会有可能,只有新的内容会添加到它上面。

因此,假设用户位于以下页面:http:// domain.com / site / page.html
然后浏览器可以让我执行" location.append = new.html"
并且该页面变为:" http://domain.com/site/page.htmlnew.html",并且浏览器不会对其进行更改。

或者只是允许用户更改get参数,所以让我们location.get = me = 1&page = 1

因此原始页面将变为" http://domain.com/site/page.html?me=1&page=1",并且不会刷新。

问题在于,更改哈希后,数据不会被缓存(至少我不这么认为)。因此,就像每次加载新页面一样,而非Ajax页面中的后退和前进按钮能够缓存数据,而无需花费时间重新加载数据。

从我看到的结果来看,雅虎历史记录已经可以一次加载所有数据。它似乎没有执行任何Ajax请求。因此,当使用" div"来处理不同的方法超时时,不会为每个历史记录状态存储该数据。

对于HTML 5,请使用" history.pushState"函数。举个例子:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

和href:

<a href="#" id='click'>Click to change url to bar.html</a>

如果要更改URL而不在后退按钮列表中添加条目,请改用history.replaceState