我们如何使用javascript约束/限制用户从页面重新加载或浏览器返回或转发

时间:2018-05-21 12:12:59

标签: javascript jquery html reactjs

我有注册页面,当用户输入一些细节并点击刷新或后退/前进按钮时。然后我们必须用模式弹出警告用户: "您确定要离开页面"。 我已尝试了一些,但警报显示在每个页面中。我只需要在注册页面上,无需刷新其他页面中的警报消息。

我已将此代码添加到注册页面



componentWillMount()
{
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
    myEvent(chkevent, function(e) { 
    var confirmationMessage = 'Are you sure to leave the    page?'; 
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
}




如何阻止除注册页面以外的其他页面中的刷新警报消息以及如何在刷新/后退/前进按钮中添加自定义警报消息。

1 个答案:

答案 0 :(得分:0)

你可以在react-router-dom中使用提示,你可以在react-router-dom文件中找到https://reacttraining.com/react-router/core/api/Prompt

该对象具有pathname属性,通过检查它是下一个路径,您可以确定该路径是否安全。这就是我所说的:

<Prompt message={(params) => 
        params.pathname == '/about' ? "Move away?" : true } />

并参考此https://codepen.io/anon/pen/XReabZ