Javascript 是否仍然可以检测上一次导航事件是否由后退或前进浏览器按钮引起？

我正在编写一个单页web应用程序，它使用HTML5推送状态回退到散列标记来处理客户端导航

我注意到的一点是，如果用户向下滚动页面，然后单击指向另一页面的链接，当他们导航到该页面时，浏览器仍将保持在滚动位置

我想知道的是，如果你进入一个新页面，它会平滑地将你滚动到顶部，就像所有网站在跟踪链接时的行为一样

我通过导航控制器中的jquery动画实现了这一点，现在的问题是，如果单击“浏览器后退”按钮，您将不会返回到以前的滚动位置，相反，您将位于上一页，但会滚动到顶部

是否可以检测上次/当前客户端导航是否由浏览器的后退或前进按钮引起？如果是这样，我将使用它来防止滚动

---

干杯

据我所知，您只能看到我的应用程序更改了标签与浏览器强制更改标签之间的区别

我是这样检查的：

当您的控制器推送一个新状态打开一个带有新hashtag的页面时，在将其设置为window.location.hash之前，将该新hashtag存储在一个全局javascript变量中。 捕获“hashchange”事件后，将您的此全局变量与window.location.hash进行比较。 如果全局变量与新的哈希标记相同，则表示应用程序只是更改了哈希本身，并打开了一个新页面。 如果未设置全局变量，则表示浏览器强制导航。 但是，您无法知道浏览器是因为地址栏编辑还是因为“后退/前进”按钮而强制导航

考虑以下代码：

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

gCurrentHash = window.location.hash;

在控制器中，在更新哈希标记之前，调用以下代码：

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

gCurrentHash = window.location.hash;

在实际更改window.location.hashtag之前调用它是非常重要的

[编辑]您可以尝试以下替代方法：

---

将标签更改的历史记录存储在cookie中，并比较更改。根据这些信息，您可以估计向后/向前导航事件。

据我所知，您只能了解我的应用程序更改了标签与浏览器强制更改标签之间的差异

我是这样检查的：

当您的控制器推送一个新状态打开一个带有新hashtag的页面时，在将其设置为window.location.hash之前，将该新hashtag存储在一个全局javascript变量中。 捕获“hashchange”事件后，将您的此全局变量与window.location.hash进行比较。 如果全局变量与新的哈希标记相同，则表示应用程序只是更改了哈希本身，并打开了一个新页面。 如果未设置全局变量，则表示浏览器强制导航。 但是，您无法知道浏览器是因为地址栏编辑还是因为“后退/前进”按钮而强制导航

考虑以下代码：

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

gCurrentHash = window.location.hash;

在控制器中，在更新哈希标记之前，调用以下代码：

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

gCurrentHash = window.location.hash;

在实际更改window.location.hashtag之前调用它是非常重要的

[编辑]您可以尝试以下替代方法：

---

将标签更改的历史记录存储在cookie中，并比较更改。根据这些信息，您可以估计向后/向前导航事件。

我希望我当前正在处理的站点能够做出相同的响应，无论用户是否键入特殊的ajax识别哈希标记、将其添加书签或单击相应的页面链接。因此，我查看了hashtag本身的模式，并在需要时强制导航

例如：

var myDefaultPageName = "myAjaxPage1";

// hash tags in this domain may indicate ajax page navigation
// using '#!' to indicate ajax links however, allowing user to type in 
// hashtag without '!' so function understands both '#!myAjaxPage1' and
// '#myAjaxPage1' as ajax requests, the pattern of the hashtag will be
// checked to determine if ajax navigation is needed

function processHashtagChange() {
    // note: bookmarked urls may be #! or #, need to understand both
    var startIndex = 1; // skip '#'
    if (location.hash.charAt(1) == '!') { // check for special '#!' ajax prefix
        startIndex++;
    }

    // extract ajax pagename from hash
    var pagename = location.hash.substring(startIndex); 

    var regex = "."; // match everything for now, hash tags 
                     // only used for ajax navigation here

    if (pagename.length == 0) // default to something if needed, allows 
    {                         // back button to http://mydomain.com to load 
                              // default ajax page
        pagename = myDefaultPageName;
    }

    if (pagename.match(regex)) { // does this hash indicate ajax navigation
        var pageurl = '/?page=' + pagename;    
        loadPageViaAjax(pageurl); // update the dom via ajax
    }
}

---

我希望我目前正在处理的站点能够做出相同的响应，无论用户是否键入特殊的ajax识别的hash标记、将其添加书签或单击相应的页面链接。因此，我查看了hashtag本身的模式，并在需要时强制导航

例如：

var myDefaultPageName = "myAjaxPage1";

// hash tags in this domain may indicate ajax page navigation
// using '#!' to indicate ajax links however, allowing user to type in 
// hashtag without '!' so function understands both '#!myAjaxPage1' and
// '#myAjaxPage1' as ajax requests, the pattern of the hashtag will be
// checked to determine if ajax navigation is needed

function processHashtagChange() {
    // note: bookmarked urls may be #! or #, need to understand both
    var startIndex = 1; // skip '#'
    if (location.hash.charAt(1) == '!') { // check for special '#!' ajax prefix
        startIndex++;
    }

    // extract ajax pagename from hash
    var pagename = location.hash.substring(startIndex); 

    var regex = "."; // match everything for now, hash tags 
                     // only used for ajax navigation here

    if (pagename.length == 0) // default to something if needed, allows 
    {                         // back button to http://mydomain.com to load 
                              // default ajax page
        pagename = myDefaultPageName;
    }

    if (pagename.match(regex)) { // does this hash indicate ajax navigation
        var pageurl = '/?page=' + pagename;    
        loadPageViaAjax(pageurl); // update the dom via ajax
    }
}