前端一些不常用知识记录

1. 获取用户进入当前标签页或者离开标签页事件

document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        console.log('你又进来啦？');
    } else {
        console.log('你要离开啦？');
    }
})

2. iframe实战，postMessage参数的传递

　　a.  子页面向父页面传参

// 子页面传递
const parentWindow = window.parent.window;
parentWindow.postMessage('success: child message!', '*');

// 父页面接收
window.addEventListener('message',function(response){
　　const postData = response.data;
　　console.log(postData, '<=== child msg'); // success: child message!
});

 

　　b.  父页面向子页面传参

// 父页面传递
  const childAddress = 'http://127.0.0.1:8080';
  const iframe = document.getElementById('iframe');
  iframe.contentWindow.postMessage('success: parent message!', childAddress);

  // 子页面接收
  const parentAddress = 'http://128.0.0.1:8080';
  componentDidMount() {
    window.addEventListener('message', this.onListenerPostMessage);
  }
  componentWillUnmount() {
    window.removeEventListener('message', this.onListenerPostMessage);
  }
  
  onListenerPostMessage = (response) => {
    const postData = response.data;
    const origin = response.origin || response.originalEvent.origin;
    if (origin !== parentAddress) { // 过滤
      return;
    }
    console.log(postData, '<=== parent msg'); // success: parent message!
  };