iframe 子父页面互相通信

最新推荐文章于 2025-05-09 15:38:32 发布

脑瓜不疼

最新推荐文章于 2025-05-09 15:38:32 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html5 vue.js

本文链接：https://blog.youkuaiyun.com/super__code/article/details/120267850

这篇博客详细介绍了如何在JavaScript中实现父子页面之间的消息传递。通过使用`postMessage`方法，可以实现从父页面向子页面以及从子页面向父页面发送数据。同时，展示了在接收到消息时的处理函数`handleMessage`的实现。示例代码涵盖了React组件中设置事件监听以及触发消息传递的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点

1、父页面向子页面发送消息
  const idIframe = document.getElementById("idIframe").contentWindow
  const data = {data: 10000}
  idIframe.postMessage(data, '*');

2、子页面向父页面发送消息
  const data = {data: 10000}
  window.parent.postMessage(data , "*");
 
3、接收消息方法
  window.addEventListener('message', function (e) {
	// do something
  })

父页面

import React, { useState } from 'react';
import {Spin, Button} from 'antd'

export default class IframeIndex extends React.Component {
  refIframe = React.createRef()
  constructor() {
    super()
    this.state ={
      loading: true
    }
  }

  componentDidMount(){
    const idIframe = document.getElementById("idIframe")
    idIframe.onload = () => {
      this.setState({
        loading: false
      })
    }
    window.addEventListener("message", this.handleMessage)
  }
  /**
   * 监听子页面传过来的值的方法
   * @param {Object} event
   */
  handleMessage(event) {
    console.log(event, '监听子页面传过来的值的方法');
    // do something
  }

  /**
   * 向iframe传值的方法
   * @param {Object} data
   */
  sendMessage = () => {
    const idIframe = document.getElementById("idIframe").contentWindow
    const data = {data: 10000}
    idIframe.postMessage(data, '*');
  }

  render() {
    const { loading } = this.state

    return(
      <>
        <Spin spinning={loading}>
          <Button onClick={this.sendMessage}>向iframe传值的方法</Button>
          <iframe
            id={"idIframe"}
            ref={this.refIframe}
            frameBorder="0"
            src={'http://localhost:8000/iframe/child'}
            width={"100%"}
            height={"400px"}
          ></iframe>
        </Spin>
      </>
    )
  }
}

子页面

import React, { useState } from 'react';

import { Button } from 'antd';

export default class IframeIndex extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    // 监听postMessage 数据
    window.addEventListener('message', (e) => {
      console.log(e);
    });
  }

  /**
   * 向iframe传值的方法
   * @param {Object} data
   */
  sendMessage = () => {
    const idIframe = document.getElementById('idIframe').contentWindow;
    const data = { data: 10000 };
    idIframe.postMessage(data, '*');
  };

  render() {
    return (
      <>
        <div style={{ padding: '10px' }}>
          <Button size='small' onClick={() => this.postMessage()}>向父页面传值</Button>&nbsp;
        </div>
      </>
    );
  }
}