内嵌iframe父子页面间的数据交互(constentWindow.postMessage)_iframe数据交互

封装postMessage信息交互

/**
* message 传递数据 
* 例：{ type: 'create', data: {x: 1, y: 2, z: 3} } // 新增逻辑 新增数据是data
* target 通信目标 默认取页面第一个iframe
* origin 设置通信范围 默认 (*) 无限制
*/
const postMessageHandle = (message, target = window[0], origin = '*') => {
	target.postMessage(message, origin);
};
1
2
3
4
5
6
7
8
9
'
运行
运行

1、下面是 parent 页面

**【注意】**iframe 的 src 填自己的地址

import React, { useEffect, useRef } from 'react'

export default function index() {
    const myRef = useRef(null);
	useEffect(() => {
		// 添加message事件，监听iframe页面回传信息
	    window.addEventListener('message', receiveInitMsg, false);

	    return () => {
	      window.removeEventListener('message', receiveInitMsg, false);
	    };
	  }, []);

	const receiveInitMsg = (event) => {
	  console.log('子(iframe)传父', event?.data);
	  if (event?.data?.type === 'send_parent_data') {
	    console.log('保存最后的操作');
	  } else if (event?.data?.type === '回传数据') {
		// 根据 iframe 回传内容，写各自页面逻辑代码 
	  }
	};
	
	// 给iframe页面传递数据
	const parentToChild = () => {
		if (myRef) {
			myRef.contentWindow.postMessage({
				type: 'to iframe child',
				data: {}
			},'*')
		}
	}

  return (
    <div>
       <iframe
	      ref={myRef}
	      src="http://localhost:3000/#/test"
	      frameBorder="0"
	      width="800px"
	      height="600px"
	    />
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

2、iframe 子页面

import React, { useEffect, useRef } from 'react';

export default function index() {
  const inpRef = useRef(null);

  useEffect(() => {
    // 添加监听事件，监听父页面回传的消息
    window.addEventListener('message', receiveInitMsg, false);
    // postMessage，向父页面发送消息，默认第一次渲染回传空数据（有默认值回传默认值也行）
    window.parent.postMessage(
      {
        type: 'send_parent_data',
        data: {}
      },
      '*'
    );
    return () => {
      window.removeEventListener('message', receiveInitMsg, false);
    };
  }, []);

  const receiveInitMsg = (event) => {
    console.log(event, 'event父传子触发成功');
    if (event?.data?.type === 'send_child') {
      // 自己的业务逻辑代码
      console.log('父传子(iframe)：', event?.data);
      window.parent.postMessage(
        {
          type: 'send_parent_data',
          data: {
            val: inpRef.current.value
          }
        },
        '*'
      );
    } else if (event?.data?.type === 'getPageData') {
      // 自己的业务逻辑代码
    }
  };

  // iframe 页面手动回传数据给父页面
  const iframe_to_parent = () => {
    window.parent.postMessage(
      {
        type: 'send_parent_data',
        data: {
          inpVal: inpRef.current.value
        }
      },
      '*'
    );
  };

  return (
    <div className="child">
      <div>
        <input type="text" ref={inpRef} />
        <button onClick={iframe_to_parent}>发送</button>
      </div>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63