javascript - 如何禁用浏览器后退按钮

Question

有人可以帮助我需要什么代码才能禁用后退浏览器功能吗？我想禁用它，因为当用户使用它时，它会重置所有用户条目并从头开始。我是个菜鸟，所以非常感谢您的帮助。

这只是我正在使用的代码示例

非常感谢!

startTextHandler = async ()=>{
    await this.props.form.validateFields();
    let takerdetail = this.props.form.getFieldsValue();
    let uuid = window.location.pathname.split('/').slice(-1)[0];
    const params = {uuid:this.getUUID()};
    axios.get(`${env.url}/api/v1/test/validate-request`,{params}).then((res) => {
        if(res.data.success && (res.data.request.user === takerdetail.email || res.data.request.test_taker === null)){
        takerdetail.sponsor = res.data.request.sponsor;
        takerdetail.uuid = this.getUUID();
        console.log(takerdetail.uuid);
        this.props.dispatch(QuestionActions.setTakerDetail(takerdetail));
        this.props.history.push(`${this.props.location.pathname}/questions`.replace('//','/'));
        }
        else{
            this.props.form.validateFields((error, values) => {
                if (!error) {
                    this.props.form.setFields({
                        email: {
                            value: values.email,
                            errors: [new Error('Wrong email-id or test link')],
                        }
                    });
                } 
                else {
                  console.log('error', error, values);
                }
              });
        }

    }, (err) => {
        this.props.history.push('/');
    });

};
getUUID(){
    return window.location.pathname.match(/([0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/g)[0];
}
    render() {
        const { getFieldDecorator } = this.props.form;

        return (

                                            <div className="subtext">
                                              <Checkbox> I have read and I accept the
                                                  <a target="_blank" href="https://docs.wixstatic.com/ugd/3c785b_bbea80070bda4759bd96f7955b0ef891.pdf"> Terms of Use and Privacy Policy. </a>
                                                I agree that my participation in this personality profiling is voluntary and understand that
                                                my responses will be kept for the intended purposes.</Checkbox>
                                            </div>
                                        )}
                                    </Form.Item>
                                </div>
                                <div className="inputitems terms">

                                    <Form.Item>
                                        {/* <button onClick={this.startTextHandler} className="psButton">START THE TEST</button> */}
                                        <Button  onClick={this.startTextHandler} text={"START THE TEST"}/>
                                    </Form.Item>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        )

    }
}
export default  connect()(withRouter(Form.create({ name: 'register' })(TakerDetail)));

Answer 1

通常，您不应禁用浏览器中的后退按钮。

也就是说，您可以通过按预期使用浏览器状态来实现您的目标，即在用户输入数据时创建一个新状态，以便在用户按下后退按钮时可以将其弹回到浏览器中。

https://www.sitepoint.com/javascript-history-pushstate/

其中解释了如何操作浏览器历史记录并向历史记录添加状态，以便用户可以备份(例如)他们之前在页面上输入的内容。 (您只需在代码中创建允许这样做的机制。)