react结合iframe小实践

 

通过window.open打开一个新页面，在新的页面里嵌入iframe。

路由：

Demo.jsx

import React from 'react';
class Template extends React.Component {
  constructor(props) {
    super(props);
    this.windowOpened = null;
  }

  receiveMessageFromIframe(event) {
    console.log('receiveMessageFromIFrame...', event.data);
    if (typeof event.data === 'string') {
      console.log('receiveMessageFromIFrame...', event.data);
    }
  }

  render() {
    return (
      

         {
            this.windowOpened = window.open(
              '/#/iframeDemo/id123456',
              'newWindow',
              'menubar=0,scrollbars=1, width=500,height=500, resizable=1,status=1,titlebar=0,toolbar=0,location=1',
            );
            this.windowOpened.addEventListener('message', this.receiveMessageFromIframe, false);
          }}
        >
          点击打开新窗口
        
      
    );
  }
}

Template.propTypes = {
};

export default Template;

iframeDemo.jsx

import React from 'react';

class Template extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return (
      

        
      
    );
  }
}

Template.propTypes = {
};

export default Template;