top与ifream消息传递，同源通信？跨域通信？

最新推荐文章于 2024-07-12 09:36:48 发布

小白说(๑• . •๑)

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量127

点赞数

分类专栏： # js # 扩展插件文章标签： javascript ifream跨域通信

本文链接：https://blog.csdn.net/dongzi_yu/article/details/134847661

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

扩展插件

10 篇文章 0 订阅

订阅专栏

文章目录

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

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

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>

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>

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>

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>