您如何确定地检测用户是否在浏览器中按下了后退按钮?
如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?
为什么浏览器的后退按钮不触发它们自己的事件!?
当前回答
在javascript中，导航类型2意味着浏览器的后退或前进按钮被点击，浏览器实际上是从缓存中获取内容。
if(performance.navigation.type == 2)
{
//Do your code here
}
其他回答
以下是我的看法。假设是，当URL更改但检测到文档内没有单击时，它是浏览器返回(是的，或向前)。用户点击2秒后重置，使其在通过Ajax加载内容的页面上工作:
(function(window, $) {
var anyClick, consoleLog, debug, delay;
delay = function(sec, func) {
return setTimeout(func, sec * 1000);
};
debug = true;
anyClick = false;
consoleLog = function(type, message) {
if (debug) {
return console[type](message);
}
};
$(window.document).click(function() {
anyClick = true;
consoleLog("info", "clicked");
return delay(2, function() {
consoleLog("info", "reset click state");
return anyClick = false;
});
});
return window.addEventListener("popstate", function(e) {
if (anyClick !== true) {
consoleLog("info", "Back clicked");
return window.dataLayer.push({
event: 'analyticsEvent',
eventCategory: 'test',
eventAction: 'test'
});
}
});
})(window, jQuery);
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
alert('hello world');
}
这是唯一一个解决方案，为我工作(这不是一个一页网站)。 它支持Chrome、Firefox和Safari浏览器。
在javascript中，导航类型2意味着浏览器的后退或前进按钮被点击，浏览器实际上是从缓存中获取内容。
if(performance.navigation.type == 2)
{
//Do your code here
}
这将肯定工作(用于检测返回按钮点击)
$(window).on('popstate', function(event) {
alert("pop");
});
浏览器:https://jsfiddle.net/Limitlessisa/axt1Lqoz/
移动控制:https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/
$(document).ready(function() { $('body').on('click touch', '#share', function(e) { $('.share').fadeIn(); }); }); // geri butonunu yakalama window.onhashchange = function(e) { var oldURL = e.oldURL.split('#')[1]; var newURL = e.newURL.split('#')[1]; if (oldURL == 'share') { $('.share').fadeOut(); e.preventDefault(); return false; } //console.log('old:'+oldURL+' new:'+newURL); } .share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px; <!DOCTYPE html> <html> <head> <title>Back Button Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body style="text-align:center; padding:0;"> <a href="#share" id="share">Share</a> <div class="share" style=""> <h1>Test Page</h1> <p> Back button press please for control.</p> </div> </body> </html>
