top与ifream消息传递，同源通信？跨域通信？_top和ifame之间公用参数

作者：运维做开发 | 2024-08-18 13:13:11

踩

top和ifame之间公用参数

文章目录

作为一个后端，之前不了解关于页面数据通信存在同源和跨域的问题。最近恰好遇见跨域页面通信无效的问题，查询了一些资料记录一下，也为之前的两篇文章做下内容补充。

关于跨域通信问题的解释：

top与ifream进行同源通信

ifream作为top的子页面，同源通信的时候，可以使用自定义事件**new CustomEvent('message-type', {detail: ''})**，这时候的通信不存在跨域问题。
可以查看文章浏览器插件在content_script和top窗口之间进行消息通信-CSDN博客了解页面跨域和同源问题。

ifream页面html示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ifream</title>
	<link rel="stylesheet" href="">
</head>
<body style="text-align: center;">
	<div id="cId">ifream子页面元素</div>
</body>

<!-- 子页面发送消息 -->
<script type="text/javascript">

  // 脚本属于ifream，而非top
	// ifream向top页面发送同源消息:可以使用自定义事件发送
  // 只有在ifream加载完成才能发送
	top.dispatchEvent(new CustomEvent('top-to-ifream-1', { detail: 'data'}))
</script>


<!-- 子页面监听listener-top-1消息 -->
<script type="text/javascript">

  	window.addEventListener('listener-top-1', (e) => {
  		console.log('window.addEventListener: ', e)
  	})
</script>
</html>
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

top父页面html示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>top</title>
	<link rel="stylesheet" href="">
</head>
<body style="text-align: center;">
	<div id="parentId">父页面元素</div>
</body>

<!-- 父页面监听子页面：top-to-ifream-1消息 -->
<script type="text/javascript">
	window.addEventListener('top-to-ifream-1', (e) => {
		console.log('window.addEventListener: ', e)
	})
</script>

<!-- 父页面向指定ifream子页面发送listener-top-1消息 -->
<script type="text/javascript">
    // ifreamId:子页面ifream元素id
    document.getElementById("ifreamId").contentWindow.dispatchEvent({ type:'listener-top-1', data: '' }, '*')
</script>
</html>
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

top与ifream进行跨域通信

ifream作为top的子页面，跨域通信时不能使用自定义事件，必须要用支持跨域通信的window.postMessage({type: 'message-type', data: {}}, '*') 来进行消息的发送。需要注意的是：window.postMessage可以跨文档通信。

ifream页面html示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ifream</title>
	<link rel="stylesheet" href="">
</head>
<body style="text-align: center;">
	<div id="cId">ifream子页面元素</div>
</body>

<!-- 子页面发送message-type-1消息  -->
<script type="text/javascript">

  // 脚本属于ifream，而非top
  // ifream发送，父页面接收
	top.postMessage({type: 'message-type-1', data: {}}, '*')
</script>

  <!-- 子页面接收message-type-2消息  -->
<script type="text/javascript">

  // 脚本属于ifream，而非top
  window.addEventListener('message-type-2', (e) => {
		console.log('window.addEventListener: ', e)
	})
</script>
</html>
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

top父页面html示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>top</title>
	<link rel="stylesheet" href="">
</head>
<body style="text-align: center;">
	<div id="parentId">父页面元素</div>
</body>

<!-- 父页面接收message-type-1消息  -->
<script type="text/javascript">
	// 父页面监听ifream传来的跨域消息
	window.addEventListener('message-type-1', (e) => {
		console.log('window.addEventListener: ', e)
	})
</script>

  <!-- 父页面发送message-type-2消息  -->
<script type="text/javascript">
	// 父页面向指定ifream发送跨域消息
  // ifreamId, 是嵌入到top页面的ifream子页面的id
  document.getElementById("ifreamId").contentWindow.postMessage({ type:'message-type-2', data: '' }, '*')
</script>
</html>
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

参考链接

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/997593