vue中监听iframe页面中的值，并解决audio标签在谷歌不能自动播放的问题

项目中有一个iframe引入的大屏页面，大屏页面会根据WebSocket后端返回的状态进行报警，但是这个audio标签在谷歌浏览器里不能自动播放，找了很多文章，绕不开这个限制，最后只能找一个折中的办法，将audio标签放在app.vue页面中，项目肯定要先登录了，就肯定要点击了，这样就有交互了，audio标签就能自动播放了。

这个是非父子组件之间交互使用的，习惯这样写 main.js里

Vue.prototype.ev=new Vue()

这个是app.vue页面，放了一个audio标签，

  <div id="app">
    <audio  ref='audio'>
      <source src="./assets/1102101036.mp3" type="audio/ogg">
    </audio>
    <router-view />
  </div>
	
   mounted() {
   //接收通知来播放声音
    this.ev.$on('play', () => {
      this.$refs.audio.play();
    })
  }

这个是展示大屏的一个a页面，iframe引入了一个本地的测试页面

<template>
  <div >
    <iframe src="http://0.0.0.0:8081/#/preview?id=85" frameborder="0" style='width:100%;height: 100%;'></iframe>
  </div>
</template>
export default {
  mounted() {
	 //监听iframe中WebSocket返回的状态值
    window.addEventListener('message', (eve) => {
    console.log(eve)
      if (eve.data.params.success) {
      //然后通知app.vue页面audio开始播放
        this.ev.$emit('play')
      }
    })
 }
}

这是接收到postMessage返回的值

这个就是iframse的那个页面，通过postMessage返回的值

mounted(){
	//这里只是用了一个定时器来模拟接口请求异步
    setTimeout(() => {
      console.log('发送了');
      window.parent.postMessage({  //参数是对象
        cmd: '***',
        params: {
          success: true
        }
      }, '*');
   }, 5000)
}

到这里就结束了，大概就这样了，audio标签真麻烦，必须要有交互才能播放，video标签也是autoplay和muted两个属性都有 才能自动播放，限制弹出广告