记录一下使用iframe过程(vue)
HTML
<iframe
title="标题"
frameborder="0"
scrolling="auto"
:src="urls"
:id="iframe"
><p>
Your browser does not support iframes/浏览器暂不支持.
</p></iframe
>
接收数据
window.onmessage = e => {
// console.log(e.data, "页面中接受的数据");
};
这样写好像可以避免触发两次(具体原因不清楚)
在uniapp中上面的方法好像有点问题,就用下面这种方式
window.addEventListener("message", function(e) {
// console.log(e.data, "页面中接受的数据");
})
监听方法写在mounted周期里面
主页面发消息
document.getElementById('iframe的id').contentWindow.postMessage('传到子页面的数据',"*");
子页面发消息
window.parent.postMessage('发送给主页面数据', '*')
子页面初始化的时候会接收到一个不是父页面发送的消息,操作数据的时候会有影响,所以子页面可以先发个成功消息,主页面接收到后再发送消息;或者在接收消息时判断是否有某个特定的值也可以;
记录问题
在项目中iframe子页面有个删除数组的功能,输出结果后发现数据删除正确,但是视图更新却是错误的;重新由主页面再重新获取数据也不能正确更新,除非重新进入,最后也没找到解决办法;最后在删除的时候用 location.reload() 就可以正常更新(可能是因为key值的原因,但因为项目数据中没有可代替的特殊值,只能用index)
后续使用
在iframe中调用摄像头使用属性
allow="microphone;camera;midi;encrypted-media;"
在iframe中如果跨域调用摄像头用不了