uniapp webview h5 通信 window.postMessage 方式_uniapp window.postmessage

作者：2023面试高手 | 2024-04-11 17:09:07

踩

uniapp window.postmessage

uniapp webview h5 通信 window.postMessage 方式

父页面

<template>
	<view>
		<!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> -->
		<button style="position: absolute;bottom: 20px;z-index: 90000;" @click="evalJs">发送消息</button>
		<view style="padding-top: 20px;">
			<web-view ref="webview" class="webview" src="/static/123.html"></web-view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			// 调用 webview 内部逻辑
			evalJs: function() {
				// console.log(12);
                //通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；
                //window.frames[0] 注意窗口
				window.frames[0].postMessage("hello there!","*")
			}
		}
	}
</script>

<style>

</style>

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

子页面

<html>
<head>
</head>

<body>
	<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<div id="io_news" class="rule-content">加载中...</div>

</body>

</html>
<script>
  // 接收webView 传递的信息
  window.addEventListener("message", receiveMessage, false);
  function receiveMessage(event)
  {
    console.log(event);
	console.log(event.data);
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
			//监听消息反馈
			window.addEventListener('message', (event) => {
				console.log("子组件收到消息:"+JSON.stringify(event.data) +  ',' + event.origin)
				event.source.postMessage('回复:123456',event.origin)
			}, false);
</script>
1
2
3
4
5
6
7

window.postMessage 【window.postMessage - Web API 接口参考 | MDN (mozilla.org)】

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);
1

Copy to Clipboard

otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames (en-US)。
message

将要发送到其他 window 的数据。它将会被结构化克隆算法 (en-US)序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin

通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer 可选

是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

The dispatched event

执行如下代码，其他 window 可以监听分发的 message:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  // 这里不准确，chrome 没有这个属性
  // var origin = event.origin || event.originalEvent.origin;
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Copy to Clipboard

message 的属性有：

data

从其他 window 中传递过来的对象。
origin

调用 postMessage 时消息发送方窗口的 origin . 这个字符串由协议、“
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/406279