在Vue2或者uni-app中嵌入本地HTML页面并进行互通有无通信,可以使用iframe标签进行页面嵌入,然后通过postMessage进行跨文档消息传递。
以下是在Vue2和uni-app中的实现方式:
- Vue2中使用iframe嵌入本地HTML页面并互通有无:
<template>
<div>
<iframe ref="iframe" src="你的本地HTML页面路径" @load="onLoad"></iframe>
</div>
</template>
<script>
export default {
methods: {
onLoad() {
// 监听iframe加载完成后,向其发送消息
this.$refs.iframe.contentWindow.postMessage('Hello from Vue app', '*');
}
}
}
</script>
在iframe加载完成后,向其发送消息。
- 在本地HTML页面中接收并处理消息:
<!DOCTYPE html>
<html>
<head>
<title>Local HTML Page</title>
<script>
window.addEventListener('message', function(event) {
console.log('Message received from Vue app:', event.data);
// 对消息进行处理
// 可以根据event.data进行相应的操作
// 然后可以选择性的回复Vue应用
event.source.postMessage('Hello back from local HTML', '*');
});
</script>
</head>
<body>
<h1>This is a local HTML page</h1>
</body>
</html>
在uni-app中,由于其是基于WebView的,所以其中iframe的使用和Vue2中的使用方式几乎一样。
在iframe中发送消息:
<template>
<view>
<web-view src="你的本地HTML页面路径" @message="onMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
onMessage(e) {
console.log('收到消息', e.detail.data);
}
}
}
</script>
在本地HTML页面中接收并处理消息的方式也和在Vue2中一样。
注意:在实际使用中,为了安全,应该指定消息发送到特定的域名,而不是使用'*'。
以上就是在Vue2和uni-app中使用iframe进行页面嵌入和互通有无的方法和示例代码。