微信小程序下web-view和浏览器下的iframe详解

一、微信小程序web-view通信及使用

 

1、web-view在微信小程序下始终保持全屏（功能区要在链接下完成）

2、微信小程序向web-view传参只能通过url地址拼接

3、web-view向微信小程序传惨可通过特定的时机传参 链接

 二、iframe使用

1、可通过css自定义样式大小

2、可通过url问号拼接形式传参

3、可通过window.addEventListener("message" 传参

html代码

<iframe class="webview" ref="webview" id="map_iframe" src="http://172.18.242.89:8080/#/message"></iframe>

js传参代码 

// 在web端
this.$refs.webview.contentWindow.postMessage(data, *);]
// 在APP端
this.$refs.webview.evalJS.postMessage(data, *);

window.frames['map_iframe'].postMessage(JSON.stringify(params), '*');

iframe链接下的js接参代码

window.addEventListener("message",function(ev){
   console.log(ev.data,'ev---')
});