vue项目中使用iframe嵌套外部链接页面的实现与应用

一. 应用需求

在vue开发项目的过程中,需要在自己的页面框架中,引用别人做的页面功能,但又不想直接跳转,失去整个系统的统一性,只想在这个子页面(子路由里跳转),那么如何实现呢?
在这里插入图片描述

很简单!iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例,实际开发中,你需要嵌入什么就嵌入什么,只需要在路由中更改名字和链接的url即可。

二、实现过程

1、侧边栏的实现

以下代码都是在sideMenu.vue侧边栏组件中实现
在这里插入图片描述

1.1 template页面显示部分——为侧边栏绑定单击事件
<template>
	<div>
		<Menu :active-name="$route.name" theme="dark" width="auto" :class="menuitemClasses" @on-select="menuClick" :open-names="openNames">
			<!--其他菜单元素-->
			<!--……-->
			<MenuItem name="LinkHome" @click.native="gotoPage(graphItems.path)">
				<i class="iconfont icon-zhishitupu"  :class="isCollapsed?'menu-icon-collapsed':''"></i>
				<span v-if="!isCollapsed">哔哩哔哩</span>
			</MenuItem>
			<!--……-->
			<!--其他菜单元素-->
		</Menu>
	</div>
</template>
1.2 设置数据(data return部分)
data () {
    return {
    	// …… 其他数据
        graphItems: {
            name:'哔哩哔哩',
            path:'LinkHome'
        }
        // …… 其他数据
    }
},
1.3 methods方法
methods:{
	// …… 其他方法
	onClickLeft() {
      this.$router.go(-1);
    },
       gotoPage(path){
         this.$router.push(path);
	  	 // store存储目标外链的url及要显示的标题
	  	 // link和title写在路由配置里的meta参数下
         this.$store.state.iframeSrc = this.$route.meta.link
         this.$store.state.iframeTitle = this.$route.meta.title
       },
       // …… 其他方法
}

2、在store.js中加上iframeSrc和iframeTitle两个值

state: {
		...
      
        iframeSrc:'',
        iframeTitle: ''
},

3、vue-router路由的配置

 routes: [
   	// 其他父级页面路由配置
    {
      path: '/system',
      name: 'system',
      component: resolve => require(['@/components/system/system'], resolve),
     
      children: [
        // 其他子页面路由配置
        // 。。。
        {
          path: 'LinkHome',
          name: 'LinkHome',
          meta: {
          	// 之后你自己的项目中需要嵌入什么就改link属性值即可。
            title: '哔哩哔哩',
            link: 'https://www.bilibili.com/' 
          },
          // 你的LinkHome.vue组件放的目录位置
          component: resolve => require(['@/components/bilibili/LinkHome'], resolve)
        },
        // 其他页面路由配置
        // 。。。
      ]
    },
  ],

2、LinkHome.vue的实现

<template>
  <div>
    <div id="iframe-container">
      <iframe :src="$store.state.iframeSrc" scrolling="auto" frameborder="0" class="trend-container2" id="iframe"></iframe>
    </div>
  </div>
</template>

<script>
// 进度条的使用需要安装NProgress,并在main.js注册一哈
import NProgress from 'nprogress'

export default {
  name: "LinkHome",
  mounted() {
    let iframe = document.getElementById('iframe')
    NProgress.start()

    iframe.onload = function() {
      NProgress.done()
    }
  },
}
</script>

<style scoped>
.trend-container2 {
  position: relative;
  width: 100%;
  min-height: 700px;
  padding-bottom: 16px;
}
</style>

给 iframe 的 src 属性绑定值,且为目标外部页面地址。即可嵌套加载外部页面。

页面加载状态使用NProgress
需要安装NProgressnpm install --save nprogress;
并在main.js注册引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import router from './router'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

在 vue.js 的 mounted 生命周期内,开始加载进度条。

NProgress.start()

获取 iframe 元素,当 iframe 页面加载完成后,关闭进度条。

iframe.onload = function() {
  NProgress.done()
}

当后退或者关闭当前页面时,也应该一并关闭进度条提示。因为当页面还没有加载完时,后退或者关闭页面,将会导致进度条一直存在。

参考资料

https://segmentfault.com/a/1190000021601305
这个作者还引入了vant,为了响应页面中返回和叉掉两个按键的事件。
本项目中不需要,就省略了vant。

  • 14
    点赞
  • 77
    收藏
  • 打赏
    打赏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论 12

打赏作者

Microbabyshine

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值