标签：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>
标签：phone scope eve margin tor item pre create sage
原文地址：https://www.cnblogs.com/caoruichun/p/9165045.html
