首页 文章

在不使用JavaScript加载新页面的情况下更改浏览器中的URL

提问于
浏览 次
289

如何对当前页面产生某些影响的JavaScript操作，但也会更改浏览器中的URL，以便在用户点击重新加载或书签时使用新的URL？

如果后退按钮会重新加载原始URL也会很好 .

我试图在URL中记录JavaScript状态 .

javascript url fragment-identifier hashchange

13 回答

  • 2

    对我有用的是 - history.replaceState() 功能如下 -

    history.replaceState(data,"Title of page"[,'url-of-the-page']);

    这不会重新加载页面，你可以利用它与javascript事件

    回复于
  • 110

    如果您希望它在不支持 history.pushState 和 history.popState 的浏览器中工作，则"old"方式是设置片段标识符，这不会导致页面重新加载 .

    基本思路是将 window.location.hash 属性设置为包含所需状态信息的值，然后使用window.onhashchange event，或者对于不支持 onhashchange （IE <8，Firefox <3.6）的旧浏览器，定期检查以查看如果哈希值已更改（例如使用 setInterval ）并更新页面 . 您还需要检查页面加载时的哈希值以设置初始内容 .

    如果're using jQuery there'是一个hashchange plugin，它将使用浏览器支持的任何方法 . 我确信其他库也有插件 .

    需要注意的一件事是在页面上与id冲突，因为浏览器将滚动到具有匹配id的任何元素 .

    回复于
  • 37

    使用HTML 5，使用history.pushState function . 举个例子：

    <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 .

    回复于
  • 6

    window.location.href包含当前URL . 你可以从它读取，你可以附加它，你可以替换它，这可能会导致页面重新加载 .

    如果，听起来像，你想在URL中记录javascript状态，以便它可以被加入书签，而不重新加载页面，在＃之后将它附加到当前URL并且有onload事件触发的一段javascript解析当前用于查看其是否包含已保存状态的URL .

    如果你使用？而不是＃，你将强制重新加载页面，但由于你将在加载时解析保存的状态，这实际上可能不是一个问题;这将使前进和后退按钮也正常工作 .

    回复于
  • 2

    我强烈怀疑这是不可能的，因为如果它是一个令人难以置信的安全问题 . 例如，我可以创建一个看起来像银行登录页面的页面，并使地址栏中的URL看起来就像真正的银行！

    也许如果你解释为什么要这样做，人们可能会建议替代方法......

    [编辑于2011年：自从我在2008年撰写此答案以来，有关HTML5 technique的更多信息已经曝光，只要它来自同一个来源，就可以修改URL]

    回复于
  • 3

    浏览器安全设置可防止用户直接修改显示的URL . 您可以想象可能导致的网络钓鱼漏洞 .

    只有在不更改页面的情况下更改URL的可靠方法是使用内部链接或散列 . 例如：http://site.com/page.html变为http://site.com/page.html#item1 . 这种技术通常用于hijax（AJAX保存历史） .

    执行此操作时，我通常只使用带有散列的操作的链接作为href，然后使用jquery添加单击事件，使用请求的散列来确定和委派操作 .

    我希望这会让你走上正确的道路 .

    回复于
  • 2

    jQuery有一个很棒的插件，用于更改浏览器的URL，称为 jQuery-pusher .

    JavaScript pushState 和jQuery可以一起使用，例如：

    history.pushState(null, null, $(this).attr('href'));

    Example:

    $('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

    仅使用更改引用者的JavaScript history.pushState() ，在更改状态后创建的XMLHttpRequest对象的HTTP头中使用 .

    Example:

    window.history.pushState("object", "Your New Title", "/new-url");

    The pushState() method:

    pushState() 有三个参数：状态对象， Headers （当前被忽略）和（可选）URL . 让我们更详细地研究这三个参数中的每一个：

    • state对象 - state对象是一个JavaScript对象，它与 pushState() 创建的新历史记录条目相关联 . 每当用户导航到新状态时，都会触发popstate事件，并且事件的state属性包含历史记录条目的状态对象的副本 .

    状态对象可以是任何可以序列化的对象 . 因为Firefox将状态对象保存到用户的磁盘，因此可以在用户重新启动浏览器后恢复它们，因此我们在状态对象的序列化表示上强加了640k字符的大小限制 . 如果传递序列化表示形式大于此值的状态对象 pushState() ，该方法将抛出异常 . 如果您需要更多空间，建议您使用sessionStorage和/或localStorage .

    • title - Firefox目前忽略此参数，尽管它将来可能会使用它 . 在此处传递空字符串应该可以安全地防止将来对方法进行更改 . 或者，您可以为您要移动的州通过一个简短的 Headers .

    • URL - 新历史记录条目's URL is given by this parameter. Note that the browser won' t尝试在调用 pushState() 之后加载此URL，但稍后可能会尝试加载URL，例如在用户重新启动浏览器之后 . 新URL不一定是绝对的;如果它's relative, it' s相对于当前URL解析 . 新URL必须与当前URL的源相同;否则， pushState() 将抛出异常 . 此参数是可选的;如果它不是't specified, it'设置为文档的当前URL .

    回复于
  • 187

    有一个Yahoo YUI组件（浏览器历史记录管理器）可以处理这个：http://developer.yahoo.com/yui/history/

    回复于
  • 8

    Facebook的照片库使用URL中的#hash来完成此操作 . 以下是一些示例网址：

    在点击“下一步”之前：

    /photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

    点击“下一步”后：

    /photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

    请注意hash-bang（＃！）后面紧跟新URL .

    回复于
  • 4

    有一个jquery插件http://www.asual.com/jquery/address/

    我想这就是你需要的 .

    回复于
  • 0

    我的代码是：

    //change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

    和行动：

    setLocation('http://example.com/your-url-here');

    和例子

    $(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

    就这样 ：）

    回复于
  • 1

    我想知道只要页面中的父路径相同，它是否可行，只会附加一些新的东西 .

    所以就像让我们说用户在页面上一样： 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请求 . 因此，当 div 用于处理超时的不同方法时，不会为每个历史状态存储该数据 .

    回复于
  • 22

    我成功了：

    location.hash="myValue";

    它只是将 #myValue 添加到当前URL . 如果需要在页面Load上触发事件，则可以使用相同的 location.hash 来检查相关值 . 只需记住从 location.hash 返回的值中删除 # ，例如

    var articleId = window.location.hash.replace("#","");
    回复于

相关问题