postmassage用法

1、主页面

allow="camera *; microphone *"作用是开放音频权限

<template>
  <section class="basic_data">
      <iframe
      class="iframeRef"
      ref="iframeRef"
      allowfullscreen
      security="restricted"
      allow="camera *; microphone *"
    ></iframe>
    <button @click="registerFun">测试呼叫</button>
  </section>
</template>

<script src='./index.js'>
</script>
<style lang='less' scoped src='./index.less'>
</style>
export default {
  components: {
    buttons
  },
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  watch: {
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      let res = this.$refs.iframeRef.contentWindow.location = "https://192.168.0.201:8081/#/home"
      this.registerFun();
    })
  },
  methods: {
    //methods start
    /**
     * 注册参数
     */
    registerFun() {
      let res = this.$refs.iframeRef.contentWindow;
      let dom = this.$refs.iframeRef;
      let data={
        register: {//第一次打开页面参数
          username: "thkj_cs1",
          password: "123456"
        },
        // logout: {//重新登录参数
        //   username: "thkj_cs1",
        //   password: "123456"
        // }
      }
      dom.onload=()=>{
        res.postMessage(data, "*")
      }
     
    },

    /**
     * 外面一键外呼
     */
    callInFun(){
      let res = this.$refs.iframeRef.contentWindow;
      let data={
        phone:""
      }
      res.postMessage(data, "*")
    }
    //methods end

  },
}

2、远程页面监听方法

 window.addEventListener("message", (e) => {
              console.log(123,e);
            }, false);

 

posted @ 2022-08-29 10:39  春春&  阅读(140)  评论(0编辑  收藏  举报