2010-11-15 84 views
2

如果用户点击浏览器的后退按钮,我想要出现一个提示并要求确认。如果用户点击“确定”,那么它应该导航到xx.html。如果用户点击“取消”,那么它应该阻止导航。我怎样才能做到这一点?需要关于onbeforeunload的帮助或点击浏览器后退按钮

注意:我已经尝试了onbeforeunload方法,但它适用于所有导航操作。例如,单击页面上的链接也会触发此事件并向用户显示消息。

+0

检查此URL可能会帮助您http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript – 2010-11-15 13:01:44

回答

1

没有办法区分onbeforeunload事件中的导航操作。您可能通过删除每个链接的onclick处理程序中的window.onbeforeunload处理程序或对于窗体的onsubmit来禁用页面上的所有链接/表单。但是,您仍然无法分辨用户是否单击后退,转发,书签等,或者在地址栏中键入新地址。

6

你不行。你能做的最好是使用onbeforeunload并移除正常链接,当点击该事件:

<script type="text/javascript"> 
window.onbeforeunload = function() {return "Are you sure?"} 
</script> 

<a href="somewhere.html" onclick="window.onbeforeunload = null;">Leave</a> 
+0

注意:正如我的回答中所述,您可能还需要处理'

'提交。 – 2010-11-15 13:05:39

+0

非常感谢。有助于控制页面中的其他事件。但是我无法捕捉到用户在onbeforeunload方法提供的对话框中单击了“确定”。因为如果用户点击确定,那么我需要将用户导航到特定页面。请提供任何代码片段。这将有所帮助。 – 2010-11-16 14:26:42

+0

@Bala:这是不可能的。 Web应用程序的经验法则:如果您认为需要依赖诸如“on(before)unload”之类的事件或尝试控制用户导航到的位置(包括控制后退/前进按钮),那么您的整个概念就会被打破。您的概念需要包含网络(和浏览器)的功能,而不是与之相反。 – RoToRa 2010-11-17 11:14:58

-1

你可以做到这一点

$(window).bind("beforeunload", function() { 
    return "Are you Sure you want to leave this page?"; // Return whatever message you want 
});​ 

此外,如果xx.html是在他们的历史页面比你不需要添加 任何东西只是返回一个消息,它会自动把按钮为 你

编辑:看到小提琴之前,你认为它不回答曲estion 问http://jsfiddle.net/Lxq93/

编辑:有只在我的知识背 按钮显示一条消息,没有明确的办法,我也看了一下,看到了只 方法是拿起后退按钮是 $(window).bind("beforeunload",function(){return;})$(window).onbeforeunload = function(){return;},并且当页面刷新或者从当前页面的 以外的任何其他导航时,它们都选取 。这是目前唯一可以在一年内提供 最佳答案2014

编辑:

上面是所有卸载事件

http://jsfiddle.net/Lhw2x/85/

已经通过其所有较低搞乱与它不能通过JavaScript完成,直到有人决定让所有主流浏览器为每个卸载事件使用特定名称,而不是仅仅是卸载事件

所以答案是否定的,你不能强迫一个导航到一个特定的页面,当他们点击没关系的确认,当他们尝试去到不同的网页

和后退按钮没有这股其事件的特定事件的名称有几个不同的事件都在卸载事件,所以你不能做一个后退按钮特定的功能,通过javascript

0

首先,你需要捕捉“beforeunload”事件(以前的答案这里做了)。

// Display browser warning message when back/forward/reload or hyperlink navigation occurs 
$(window).on('beforeunload', function(e) { 
    console.log('page navigation captured'); 
    return 'By leaving this page you will lose the data you have entered here.'; 
}); 

更重要的是,您希望允许来自某些元素的不间断导航(例如,类“allow-navigation”的链接)。实现的方法是在点击选择的链接时删除事件处理程序。

// Disable capture for certain elements 
$('.allow-navigation').on('click', function(e) { 
    $(window).off('beforeunload'); 
    console.log('page navigation allowed'); 
}); 

工作会为你的类型的链接:

<a href="#" class="allow-navigation">Click me</a> 

这样你就可以控制页面导航。浏览器后退/转发/等仍然打开确认框。但是您选择的链接不会中断。

希望这会有所帮助。