javascript - React JS: ability to detect switching tab in browser - Stack Overflow

admin管理员组

文章数量:1287778

I'm sorry if I duplicate the question but I didn't find any solution for my problem.

What is the best way in React to detect switching tabs in browser or hide browser window?

I know there is a Page visibility API for it but how can I implement it in React ponent?

Here is the easiest way but I don't know is correct

import React, { Component } from 'react';

class Sample extends Component {
  handleBlur = () => {
    console.log('Blur');
  }

  handleFocus = () => {
    console.log('Focus');
  }

  render() {
    return (
      <div
        style={{ width: 400, height: 200 }}
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      >
      test
      </div>
    );
  }
}

export default Sample;

I'm sorry if I duplicate the question but I didn't find any solution for my problem.

What is the best way in React to detect switching tabs in browser or hide browser window?

I know there is a Page visibility API for it but how can I implement it in React ponent?

Here is the easiest way but I don't know is correct

import React, { Component } from 'react';

class Sample extends Component {
  handleBlur = () => {
    console.log('Blur');
  }

  handleFocus = () => {
    console.log('Focus');
  }

  render() {
    return (
      <div
        style={{ width: 400, height: 200 }}
        onBlur={this.handleBlur}
        onFocus={this.handleFocus}
      >
      test
      </div>
    );
  }
}

export default Sample;

• javascript
• html
• reactjs

Share Improve this question Follow edited Oct 10, 2018 at 16:44 hofshteyn asked Oct 10, 2018 at 16:28 hofshteynhofshteyn 1,27244 gold badges1717 silver badges3434 bronze badges 2

• What have you tried? Could you provide us with some code? – zfrisch Commented Oct 10, 2018 at 16:31
• @zfrisch added a sample – hofshteyn Commented Oct 10, 2018 at 16:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

let hidden = null;
let visibilityChange = null;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
  hidden = 'hidden';
  visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden';
  visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden';
  visibilityChange = 'webkitvisibilitychange';
}

class Hello extends React.Component {

  state = {
    actions: []
  }

  ponentDidMount() {
    document.addEventListener(visibilityChange, this.handleVisibilityChange, false);
  }

  handleVisibilityChange = () => {
    if (document[hidden]) {
     this.setState({actions: [...this.state.actions, 'hide']});
    } else {
     this.setState({actions: [...this.state.actions, 'show']});
    }
  }

  ponentWillUnmount()    {
    document.removeEventListener(visibilityChange, this.handleVisibilityChange);
  }

  render() {
    return (
      <ul>
      {
        this.state.actions.map((item, key) => <li key={key}>{item}</li>)
      }
    </ul>
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

本文标签： javascriptReact JS ability to detect switching tab in browserStack Overflow