使用iframe实现一页展示两个界面，点击左边界面改变右边界面页

作者: 许___ | 来源:发表于2022-04-04 15:44 被阅读0次

使用iframe实现一页展示两个界面，点击左边界面改变右边界面页
iframe遇见的问题
python通过PyQt5实现登录界面
《Unity入门案例-Tanks坦克大战》1-准备工作
2M建立参数说明
课程三
级联界面(推荐关注)
模仿斗地主2
iOS：上下左右滑动布局的实现
2.3系统主界面设计与制作

首先使用iframe实现一页展示两个界面，点击左边界面改变右边界面页面这是此次想要的效果，但你会发现点击左侧界面后，右侧界面毫无变化，但你点击刷新界面后右侧界面才发生了改变。
文章最后会附本地测试的项目文章地址，方便自己进行改造/理解
下面将会先实现一页展示两个界面的功能，再处理点击左侧界面右侧界面无变化的问题
注意：此次项目宽度为6000px,高度为2160px,记得缩放浏览器哦

1 . 实现一页展示两个界面功能

界面写的比较简陋，见谅。功能为点击对应的按钮，右侧的界面将切换为对应颜色的界面

1.1 首先准备好需要的左侧界面跟对应的功能

<template>
  <div class="box">
    <el-button type="primary" @click="JumpOne('jumpOne')">项目一</el-button>
    <el-button type="success" @click="JumpTwo('jumpTwo')">项目二</el-button>
  </div>
</template>

<script>
export default {
  
  name: '',
   
  props: {},
   
  components: {},
   
  data () {
   return {}
  },
  
  computed: {},
  
  watch: {},
  created () {
  },
  
  methods: {
    JumpOne(url){
      // 跳转时存储界面/项目的地址
      sessionStorage.setItem('setPageUrl', `http://localhost:8080/#/${url}`)
    },
    JumpTwo(url){
      // 跳转时存储界面/项目的地址
      sessionStorage.setItem('setPageUrl', `http://localhost:8080/#/${url}`)
    }
  },
  
  mounted () {},
}
</script> 

<style scoped lang="less">
.box{
  width: 1100px;
  height: 1100px;
  background-color:pink;
  display:flex;
  align-items: center;
  justify-content: center;
}
.el-button{
  width: 300px;
  height: 300px;
  font-size: 80px;
}
</style>

1.2 接下来准备下一两个界面功能

<template>
  <div class="box" >
    <iframe class="left-page"  src="http://localhost:8080/#/about" frameborder="0" ></iframe>
    <iframe  class="right-page" :src= pages  frameborder="0" ></iframe>
  </div>
</template>

<script>
export default {
  
  name: '',
   
  props: {},
   
  components: {},
   
  data () {
   return {
     pages:'',
   }
  },
  
  computed: {},
  
  watch: {},
  created () {},
  
  methods: {},
  
  mounted () { 
    this.pages = sessionStorage.getItem('setPageUrl')
   },
}
</script> 

<style scoped lang="less">
.box{
  width: 6000px;
  height:2160px;
  display: flex;
  .left-page {
    flex: 1;
  }
  .right-page {
    flex: 1;
  }
}
</style>

此时界面已经准备好了（子界面的样式结构就不写了，有兴趣可以到文章底部看项目源码）
但此时重大的问题就出现了，点击切换项目时会发现右侧界面完全没有变化，但本地存储的值已经发生了变化，根据代码的写法，此时的写法是完全支持切换的，当一脸迷茫的时候刷新下界面就发现右边界面变成了想要的效果，所以，针对问题解决就是点击后需要刷新一下界面。

2 . 解决点击左侧界面后右侧界面不更新问题

2.1 使用iframe向父级界面传参进行界面刷新

此时会使用到iframe传参跟刷新界面两种方法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

它有以下配置项：
Window.open
Window.opener
HTMLIFrameElement.contentWindow(父窗体向子窗体发送消息)
Window.parent(子窗体向父窗体发送消息)
Window.frames +索引值

message 将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

targetOrigin通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是 * 字符串（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

transfer可选是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

下面我们将进行iframe的传参与接参

// 传参
var obj = {method: "iframeClose"};
window.parent.postMessage(obj, "*", );

// 接参
window.addEventListener('message', function (e) {
  if (e.data.method == "iframeClose") {
    console.log('接收参数成功');
    window.location.reload() // 刷新界面方法
  }
}, false);

2.2 在合适的地方写入传参方法

<template>
 <template>
  <div class="box">
    <el-button type="primary" @click="JumpOne('jumpOne')">项目一</el-button>
    <el-button type="success" @click="JumpTwo('jumpTwo')">项目二</el-button>
  </div>
</template>

<script>
export default {
  
  name: '',
   
  props: {},
   
  components: {},
   
  data () {
   return {}
  },
  
  computed: {},
  
  watch: {},
  created () {
  },
  
  methods: {
    JumpOne(url){
      // iframe 传参数
      var obj = {method: "iframeTransmit"};
        window.parent.postMessage(obj, "*", );
      // 跳转时存储界面/项目的地址
      sessionStorage.setItem('setPageUrl', `http://localhost:8080/#/${url}`)
    },
    JumpTwo(url){
       // iframe 传参数
      var obj = {method: "iframeTransmit"};
        window.parent.postMessage(obj, "*", );
      // 跳转时存储界面/项目的地址
      sessionStorage.setItem('setPageUrl', `http://localhost:8080/#/${url}`)
    }
  },
  
  mounted () {},
}
</script> 

<style scoped lang="less">
.box{
  width: 1100px;
  height: 1100px;
  background-color:pink;
  display:flex;
  align-items: center;
  justify-content: center;
}
.el-button{
  width: 300px;
  height: 300px;
  font-size: 80px;
}
</style>

mian.js 写入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/all.css'

// iframe 接收参数
window.addEventListener('message', function (e) {
  if (e.data.method == "iframeTransmit") {
    console.log('接收参数成功');
    window.location.reload() // 刷新界面方法
  }
}, false);
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')