使用JavaScript/jQuery检测浏览器的“后退”按钮，而不使用任何外部插件

Question

使用JavaScript/jQuery检测浏览器的“后退”按钮，而不使用任何外部插件

javascriptjqueryhtmlinternet-explorerback-button

5

我想在JavaScript/jQuery中检测浏览器的后退按钮，而不使用任何外部插件。

我将支持以下浏览器

IE8，IE9，FireFox，Chrome

我通过谷歌搜索了很多链接，并从代码项目中找到了下面的代码部分：

<body onbeforeunload=”HandleBackFunctionality()”>

function HandleBackFunctionality()
{
    if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }
    else
    {
        if(event.currentTarget.performance.navigation.type == 1)
        {
             alert("Browser refresh button is clicked...");
        }
        if(event.currentTarget.performance.navigation.type == 2)
        {
             alert("Browser back button is clicked...");
        }
    }
}

以上代码在IE浏览器中正常工作。这意味着我能够在IE浏览器中获取window.event.clientX和clientY的值，但在Chrome/Firefox中无法工作。

当点击浏览器的后退按钮时，我需要刷新页面。

如何检测所有浏览器（IE、Firefox、Chrome）中的浏览器后退按钮单击事件？

任何帮助都将不胜感激。

- SivaRajini

你正在寻找 window.onpopstate 函数。Mozilla API 文档 Caniuse.Popstate - Mysteryos

1

@Mystreyos，但是popstate事件就像HTML5事件一样，对吧？但我也想支持IE8。你能否提供更多相关细节呢？谢谢。 - SivaRajini

寻找完全相同的东西，如何检测IE8中的后退和前进按钮点击。 - lowtechsun

@lowtechsun 我尝试过不使用外部脚本，但是会出现一些问题。所以我只能使用自定义脚本来实现。 - SivaRajini

2个回答

1

由于您还支持IE 8和9，因此没有单一的方法可以帮助您解决这个问题。您可以使用HTML5的历史API，但它不支持IE8和9。如上面的评论中所提到的，您可以在Chrome、Firefox等浏览器中使用window.onPopState，在IE中，您可以创建一个单独的js文件，并使用条件语句在用户使用IE时触发它。

例如：

<!--[if lte IE 9]>
    <script src="youIESpecificfile.js"></script>
<![endif]-->

在这里阅读有关HTML5历史记录API的更多内容：mozilla上的onPopState

希望能对您有所帮助！

- Vivin Bangera

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hamix · Accepted Answer

这可以简单地放入您的网页中，当用户点击返回时，它将调用一个函数。此调用的默认函数是JavaScript警报“Back Button Clicked”。

要替换此功能，您只需要覆盖OnBack函数。可以使用以下代码完成此操作。

<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
   alert('You clicked it!');
}
</script>

这将用“您已单击它！”警报替换“后退按钮已单击”警报。
支持以下浏览器 IE8、IE9、FireFox、Chrome
浏览器后退按钮检测
或使用 jquery
捕捉浏览器后退
使用标准的 javascript
掌握JavaScript中的后退按钮