Uniapp 实现 与 外部 HTML 页面通信

在 uniapp 中 经常会 内嵌 html, 并且 有时候会还有 相互通信 的需求 ：

这里 总结了 两种形式

• APP  中  nvue 使用 web-view   实现html 通信；
• H5    中  vue   使用 iframe       实现html 通信；

具体实现要参考以下几点

一.让HTML 具有调用 uniapp 接口的能力

主要是通过引入uniapp相关的js函数库

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
    //js SDK  加载成功
    document.addEventListener('UniAppJSBridgeReady', function() {
        // 监听按钮事件
        document.getElementById('to_shiming').addEventListener('click', function() {
            let data_shiming = {
                    action: '1'
                }
            // .nvue 可以接收的事件
            uni.postMessage({
                data: data_shiming
            });
            // .vue 可以接收的事件
            window.parent.postMessage(data_shiming, '*')
        });
    })
    //接收来自 .vue  的数据 和 参数  间接 调用 函数
    window.addEventListener('message', function(event) {
        // event.origin --发送者的源
        // event.source --发送者的window对象
        // event.data --数据
        if (event.data) {
            //此处执行事件
            if (event.data.action == 66) {
                console.log("event.data.time:", event.data.time)
                setBirDayInit(event.data.time)
                setBirDay(true)
            }
        }
    })
    // .nvue 直接调用函数
    function setBirDay(data) {
    }
    // .nvue 直接调用函数
    function setBirDayInit(day) {
    }
</script>

二.从 uniapp 调用 html  网页

1.从  .nvue  调用 html

<template>
	<view class="web-view">
		<web-view class="web-view" :src="url" ref="webview" @onPostMessage="handlePostMessage" @receivedtitle="onReceivedTitle">
		</web-view>
	</view>
</template>
 
<script>
	export default {
		methods: {
			handlePostMessage: function(data) {
				// 获取网页的参数
				console.log("得到参数", data.detail);
			},
 
			onPageFinish: function(e) {
				this.$refs.webview.evalJs("方法名('" + 参数 + "')");
				this.$refs.webview.evalJs("方法名('参数')");
			},
		}
	}
</script>

2.从  .vue   调用 html

<template>
	<view class="bir-webviwe">
		<iframe id="iframe" class="viewiframe" :src="url" ref="iframe" @onload="onLoad"></iframe>
	</view>
</template>
 
<script>
	export default {
		mounted() {
			// 接受子页面发来的信息
			window.addEventListener("message", this.ReceiveMessage);
			//console.log("------>",this.url)
		},
		methods: {
			onLoad() {
				console.log("---------------->onLoad")			
			},
			ReceiveMessage(event) {
				if (event.data && event.data.data && event.data.data.arg) {
					console.log("iframe 参数 event.data:", event.data.data.arg)
				}
			},
 
			SendMessage() {	
				let str = toolTimer.formatTime(new Date(), "yyyy-MM-dd")
				let data = {
					action: 66,
					time: str
				}
				document.getElementById('iframe').contentWindow.postMessage(data, '*')
			}
		}
	}
</script>

————————————————

原文链接：https://blog.csdn.net/nicepainkiller/article/details/104475415

很赞哦！ (0)