如果要在React中引入外部界面, 可以考虑使用iframe标签. 特别是当重构某个项目, 变成React技术架构的时候, 一部分界面先用着之前的技术架构, 一部分界面重构, 这个时候iframe总能派上用场.

但是, iframe有个坑, 比如导航栏点击下拉菜单, 点击界面其他地方的时候收回菜单这个功能, 点击在iframe上面是不起作用的.

接下来就是我的一种解决方法, 可以实现在iframe上面绑定点击事件来触发相关功能.

1. 引入redux

既然使用了react, 相信你肯定也在使用redux来管理状态吧.

import { connect } from "react-redux"
import {hideNavDropDownMenu} from './navigation/headerActions' // 收回下拉菜单action

注意这个hideNavDropDownMenu就是收回下拉菜单的action

2. 自定义一下Iframe控件

因为我们要给iframe绑定一个事件, 肯定不能使用html自带的ifram标签啦, 自己动手, 写一个React的Iframe组件吧

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { connect } from "react-redux"
import {hideNavDropDownMenu} from './navigation/headerActions'

class Iframe extends Component {
  render() {
    return (
      <iframe className='top-iframe' src={this.props.location.pathname}/>
    )
  }
}

export default connect(
  null,
  {
    hideNavDropDownMenu,
  }
)(Iframe)

好, 这样下来我们就写好一个按照我们的当前路径寻找页面的Iframe组件了
接下来就是重点了

3.(重点)给iframe引入页面的body绑定onClick事件

我们要把事件绑定在iframe里面的页面上才能实现功能
但是react寻找元素绑定事件与document不一样, 要这样找到组件并绑定事件

let {hideNavDropDownMenu} = this.props
ReactDOM.findDOMNode(this).contentDocument.body.addEventListener('click', this.props.hideNavDropDownMenu);

4. 何时进行绑定组件

在第三步我们已经知道了如何在React里面给iframe绑定事件, 那么什么时候来进行绑定呢? 答案就是: 在 iframe onLoad 的时候进行绑定.

但是, 这个时候问题又来了, 在React里面, iframe根本就没有onLoad方法. 我们需要手动给iframe绑定一个onLoad方法. 需要在componentDidMount的方法里进行绑定

componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('load', this.onLoad);
  }

然后再在onLoad方法中进行第3步

onLoad = () => {
    let {hideNavDropDownMenu} = this.props
    ReactDOM.findDOMNode(this).contentDocument.body.addEventListener('click', this.props.hideNavDropDownMenu);
  }

这样我们就成功的给iframe绑定好了点击事件

完整代码如下:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { connect } from "react-redux"
import {hideNavDropDownMenu} from './navigation/headerActions'

class Iframe extends Component {

  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('load', this.onLoad);
  }

  onLoad = () => {
    let {hideNavDropDownMenu} = this.props
    ReactDOM.findDOMNode(this).contentDocument.body.addEventListener('click', this.props.hideNavDropDownMenu);
  }

  render() {
    return (
      <iframe className='top-iframe' src={this.props.location.pathname}/>
    )
  }
}

export default connect(
  null,
  {
    hideNavDropDownMenu,
  }
)(Iframe)