码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-11 01:59:06      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:phone   scope   eve   margin   tor   item   pre   create   sage   

父页面

<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>

 



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

标签:phone   scope   eve   margin   tor   item   pre   create   sage   

原文地址:https://www.cnblogs.com/caoruichun/p/9165045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!