开发页面，如果我们关闭选项卡，则应保存关闭时间

Question

<script>
  window.onbeforeunload = function (e) {
      return "Please click 'Stay on this Page' and we will give you candy";
  };
</script>

我在 index.html(reactjs) 文件中添加了它，所以当单击关闭 window 或选项卡时，它显示'Do you want to leave'的警告标志，我需要在关闭选项卡时节省时间。

我找不到保存 browser/tab 结束时间的方法。请告诉我可能的解决方案。

import React, { Component } from 'react';
//deleted imports to decrease code length

class PrivilegeReport extends Component {
    constructor(props) {
        super();
        this.state = {
            loaded: true
        };
    }


    handleWindowClose(){
        alert("Alerted Browser Close");
    }
 
    componentDidMount() {
        document.title = "LIMS - Privilege Report ";
        window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    return ev.returnValue = 'Are you sure you want to close?';

});
    console.log("beforeunload")

    }
    componentWillUnmount() {
        window.removeEventListener('onbeforeunload', this.handleWindowClose);
        console.log("onbeforeunload")
    }
    

    render() {
        !this.state.loaded ? startLoading() : stopLoading();
        return (
            this.state.loaded && <div>
                <Header />
                <Sidebar context="Priviledge Report" />
                <main>
                    <div className="container">
                        <Breadcrumb {...{ context: 'REPORTS', leaf: 'Privilege Report' }} />
                        <div className="columns is-mobile">
                            <div className="column"><h1 className="title">Privilege Report</h1></div>
                            <div className="buttons">
                                <button className="button is-primary" onClick={e => { console.log("TBD...."); }}>Print</button>
                                <button className="button is-primary" onClick={e => { console.log("TBD...."); }}>Download</button>
                            </div>
                        </div>
                        <div className="columns">
                            <div className="column">
                                <Tabs>
                                    <TabList>
                                        <Tab><div className="tab-title">User to User Type Mappping</div></Tab>
                                        <Tab><div className="tab-title">User Type to Policy Mapping</div></Tab>
                                    </TabList>
                                    <TabPanel><Grid status="UTU" /></TabPanel>
                                    <TabPanel><Grid status="UTP" /></TabPanel>
                                </Tabs>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    me: state.me
});

const mapDispatchToProps = dispatch => {
    return {
        //updateMe: data => dispatch(updateMe(data))
    };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(PrivilegeReport));

我使用了 onbeforeunload 和 onunload 事件监听器，但由于我是初学者，所以无法完全理解。

Answer 1

您可以检查浏览器事件并使用 window 事件侦听器跟踪它们。像 :

window.addEventListener('beforeunload', function (e) {
            e.preventDefault();
            e.returnValue = "Please click 'Stay on this Page' and we will give you candy";
           alert("Please click 'Stay on this Page' and we will give you candy")
           //you can display you message here aslo can log time with new Date() to fetch system date and time.
        });

有关在选项卡上处理浏览器 activity 的更多信息，您可以查看此 link https://www.geeksforgeeks.org/how-to-detect-browser-or-tab-closing-in-javascript/

希望这能解决您的问题。

Answer 2

感谢其他人，我添加了代码并且运行良好。

<script>
  window.onbeforeunload = function (e) {
      e.preventDefault();
      e.returnValue = "Please click 'Stay on this Page' and we will give you candy";
      var d = new Date().toLocaleTimeString();
      console.log(d)
  };
</script>

开发页面，如果我们关闭选项卡，则应保存关闭时间

Developing page where if we close the tab then the closing time should be saved

javascript

ajax

events

event-handling

reactjs