vue引入iframe的父页面向子页面传递数据

Posted 2020-11-17 caoruichun

父页面

<template>
    <div>
      <el-button @click=‘btn(index)‘ :class="{‘active‘:activeName2==index}" v-for="(item,index) in list" :key="index">
          {{item.label}}
      </el-button>
      <iframe-tab :assid="assid" :tokin="tokin"></iframe-tab>
    </div>
</template>
<style lang="scss" scoped>
.block {
  margin: 10px 0;
}
.active{
  background: red;
}
</style>
<script>
import iframeTab from "../components/iframe.vue";
export default {
  name: "show",
  data() {
    return {
      activeName2: 0,
      list: [
        { label: "用户管理", name: "first", id: 1 },
        { label: "配置管理", name: "second", id: 2 },
        { label: "角色管理", name: "third", id: 3 },
        { label: "定时任务补偿", name: "fourth", id: 4 }
      ],
      assid: "1",
      tokin: ""
    };
  },
  components: {
    iframeTab
  },

  created() {
    this.phonea();
  },
  methods: {
    phonea() {
      let phone = 678907890;
      this.tokin = phone;
    },

     btn(index){
       this.assid=index+1;
       this.activeName2=index
    }
  }

};
</script>

父页面的子组件 iframe.vue

<template>
   <div>
    <iframe id="color" :src="`http://www.php.com/1.html?id=${this.assid}&access_tokin=${this.tokin}`" frameborder="0"></iframe>
   </div>
</template>
<style scoped>
</style>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    changecolor() {
      var dd = document.querySelector("#color");
      var tt = `https:www.baidu.com?id=${this.assid}&access_tokin=${
        this.tokin
      }`;
      //dd.setAttribute(‘src‘,tt)
      dd.innerHTML = tt;
    }
  },
  mounted() {
    window.onload = function() {
      var iframe = document.getElementById("color");
      var targetOrigin = "http://www.php.com"; 
      var dite="qwe"
      iframe.contentWindow.postMessage(dite, targetOrigin);
    };

    //this.changecolor();
  },
  computed: {},
  props: ["assid", "tokin"]
};
</script>

　　嵌入的子页面

<div>子页面</div>
    <div id="container"></div>
    <script>
//方法1
    window.addEventListener(‘message‘, function(event) {
        // 通过origin属性判断消息来源地址
       // if (event.origin == ‘localhost‘) {
            console.log(event.data);
            //console.log(event.source);
        //}
    }, false);
//方法二
    // $(function(){
    //   setTimeout(function(){
    //     var a=window.location.search;
    //     a=a.split(‘id=‘)[1];
    //   var b=a.split("&access_tokin=");
    //   let aaa=b[0]
    //     b=b[0]+b[1];
    //     $(‘#container‘).html(b);
    //     if(aaa){
    //         !(function(){
    //             alert(aaa)
    //         })()
    //     }
    //   },1000)  
    // })

    </script>