如何使用 JavaScript 检测地址栏更改？

发布于 2024-08-16 05:52:31 字数 609 浏览 23 评论 0原文

我有一个 Ajax 重型应用程序，可能有一个 URL，例如

http://example.com/myApp/#page=1

当用户操作站点时，地址栏可以更改为类似的内容，而

http://example.com/myApp/#page=5

无需重新加载页面。

我的问题是以下序列：

用户为第一个 URL 添加了书签。
用户操纵应用程序使得第二URL是当前状态。
用户单击步骤 1 中创建的书签。
地址栏中的 URL 从 http:// 更改example.com/myApp/#page=5 到 http://example.com/ myApp/#page=1，但我不知道如何检测发生的更改。

如果我检测到变化，一些 JavaScript 就会对其采取行动。

原文

I have a Ajax heavy application that may have a URL such as

http://example.com/myApp/#page=1

When a user manipulates the site, the address bar can change to something like

http://example.com/myApp/#page=5

without reloading the page.

My problem is the following sequence:

A user bookmarks the first URL.
The user manipulates the application such that the second URL is the current state.
The user clicks on the bookmark created in step 1.
The URL in the address bar changes from http://example.com/myApp/#page=5 to http://example.com/myApp/#page=1, but I don't know of a way to detect the change happened.

If I detect a change some JavaScript would act on it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

治碍 2024-08-23 05:52:31

HTML5 引入了一个 hashchange 事件，该事件允许您注册 url 哈希更改的通知，而无需使用计时器轮询它们。

所有主要浏览器（Firefox 3.6、IE8、Chrome、其他基于 Webkit 的浏览器）都支持它，但我仍然强烈建议使用一个为您处理事件的库 - 即在不支持的浏览器中使用计时器HTML5 事件并以其他方式使用该事件。

window.onhashchange = function() {
    alert("hashtag changed");
};

HTML5 introduces a hashchange event which allows you to register for notifications of url hash changes without polling for them with a timer.

It it supported by all major browsers (Firefox 3.6, IE8, Chrome, other Webkit-based browsers), but I'd still highly suggest to use a library which handles the event for you - i.e. by using a timer in browsers not supporting the HTML5 event and using the event otherwise.

window.onhashchange = function() {
    alert("hashtag changed");
};

For further information on the event, see https://developer.mozilla.org/en/dom/window.onhashchange and http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

回复收藏 0 原文

墨小墨 2024-08-23 05:52:31

使用 setTimeout/interval 定期检查当前地址：

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

check the current address periodically using setTimeout/interval:

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

回复收藏 0 原文

治碍 2024-08-23 05:52:31

您应该扩展位置对象以公开可以绑定到的事件。

IE：

window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}

You should extend the location object to expose an event that you can bind to.

ie:

window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}

回复收藏 0 原文