vue引入iframe的父頁面向子頁面傳遞數據
阿新 • • 發佈:2018-06-11
methods win export sid hone pos brush gin second
父頁面
<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的父頁面向子頁面傳遞數據