栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

JavaScript如何检测浏览器后退按钮事件-跨浏览器

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript如何检测浏览器后退按钮事件-跨浏览器

(注意:根据Sharky的反馈,我提供了用于检测退格的代码)

因此,我经常在SO上看到这些问题,并且最近遇到了我自己控制后退按钮功能的问题。在为我的应用程序寻找最佳解决方案(带哈希导航的单页)几天后,我提出了一个简单的,跨浏览器,无库的系统来检测后退按钮。

大多数人建议使用:

window.onhashchange = function() { //blah blah blah}

但是,当用户使用更改位置哈希值的页内元素时,也会调用此函数。当用户单击并且页面前进或后退时,这并不是最佳的用户体验。

为了让您大致了解我的系统,我在用户移动界面时用以前的哈希填充数组。看起来像这样:

function updateHistory(curr) {    window.location.lasthash.push(window.location.hash);    window.location.hash = curr;}

非常简单。我这样做是为了确保跨浏览器支持以及对较旧浏览器的支持。只需将新的哈希传递给函数,它将为您存储它,然后更改哈希(然后将其放入浏览器的历史记录中)。

我还利用了一个页面内后退按钮,该按钮可使用

lasthash
数组在页面之间移动用户。看起来像这样:

function goBack() {    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];    //blah blah blah    window.location.lasthash.pop();}

因此,这会将用户移回最后一个哈希,并从数组中删除最后一个哈希(我现在没有前进按钮)。

所以。如何检测用户是否使用了页面内后退按钮或浏览器按钮?

最初,我查看了

window.onbeforeunload
,但无济于事-仅在用户要更改页面时才调用。在使用哈希导航的单页应用程序中不会发生这种情况。

因此,经过进一步的挖掘,我看到了有关尝试设置标志变量的建议。在我的案例中,这个问题是我会尝试设置它,但是由于所有内容都是异步的,因此并不总是及时为哈希更改中的if语句设置它。

.onMouseDown
并非总是在click中被调用,并且将其添加到onclick不会足够快地触发它。

这是我开始查看

document
和之间的区别的时候
window
。我的最终解决方案是使用设置标志
document.onmouseover
,并使用禁用它
document.onmouseleave

发生的情况是,当用户的鼠标位于文档区域内(阅读:呈现的页面,但不包括浏览器框架)时,我的布尔值设置为

true
。鼠标离开文档区域后,布尔值将翻转为
false

这样,我可以将其更改

window.onhashchange
为:

window.onhashchange = function() {    if (window.innerDocClick) {        window.innerDocClick = false;    } else {        if (window.location.hash != '#undefined') { goBack();        } else { history.pushState("", document.title, window.location.pathname); location.reload();        }    }}

您会注意到的支票

#undefined
。这是因为如果我的数组中没有可用的历史记录,它将返回
undefined
。我用它来询问用户是否要使用
window.onbeforeunload
事件离开。

简而言之,对于不一定使用页内后退按钮或数组来存储历史记录的用户:

document.onmouseover = function() {    //User's mouse is inside the page.    window.innerDocClick = true;}document.onmouseleave = function() {    //User's mouse has left the page.    window.innerDocClick = false;}window.onhashchange = function() {    if (window.innerDocClick) {        //Your own in-page mechanism triggered the hash change    } else {        //Browser back button was clicked    }}

那里有。一种简单的,由三部分组成的方法,用于检测关于哈希导航的后退按钮使用情况与页内元素的关系。

$(function(){        var rx = /INPUT|SELECT|textarea/i;    $(document).bind("keydown keypress", function(e){        if( e.which == 8 ){ // 8 == backspace if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readonly ){     e.preventDefault(); }        }    });});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/456695.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号