父页面
<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>
原文地址:https://www.cnblogs.com/caoruichun/p/9165045.html
时间: 2024-10-27 08:27:52