iframe简单使用

记录一下使用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中如果跨域调用摄像头用不了