利用iframe为单页应用后台添加功能扩展

2026-09-14 15:37

16 浏览

虽然在前台也可以通过接口实现后台的功能，但是会有一种分离感，而利用动态渲染iframe页面预留一个入口，可以在不修改后台的情况下，很好地将功能融合到后台，给vue、react等单页应用后台添加功能，作为临时操作也好，扩展功能也好，都很方便，下面代码以vue为例。

iframe扩展功能演示

注册路由仅为示例，通过addRoute动态注册路由，或直接写死在路由文件中都可以，将token传递给iframe页面，通过设置iframe地址和html文件（前台可访问）就可以使用后台的扩展功能。

一、注册iframe页面路由

//注册扩展路由
this.$router.addRoute({
	name: 'extend',
	path: '/extend',
	component: () => import('@/view/extend.vue'),
	meta: {
		title: '扩展功能',
		icon: 'el-icon-s-tools',
		menu: this.setting_info?.extend_iframe_src ? true : false
	},
})

二、添加动态渲染iframe页面

<template>
	<div class="v-extend">
		<div class="js2-padding-s">
			<div class="extend-wrap js2-bg-invert js2-border-radius-m">
				<div class="js2-box">
					<iframe class="extend-iframe" :src="iframe_src" width="100%"></iframe>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'v-extend',
	data() {
		return {
			iframe_src: '',
		}
	},
	created() {
		const { setting_info: { extend_iframe_src } } = this
		this.iframe_src = extend_iframe_src ? `${extend_iframe_src}?token=${this.user.token}` : ''
	},
}
</script>

三、html文件（iframe地址，需要前台可以访问）

<body>
	<div class="App">
		<div style="margin-top:10vh;text-align:center;">
			<el-button @click="$message.success(token)">显示接收到的token</el-button>
			<el-button @click="getData()">没有传递token的请求示例</el-button>
			<el-button type="primary" @click="getData(token)">有传递token的请求示例</el-button>
		</div>
		<div>
			{{data}}
		</div>
	</div>
	<script>
		const params = new URLSearchParams(window.location.search);
		Vue.prototype.$ELEMENT = {
			size: 'mini'
		}
		new Vue({
			el: '.App',
			data: {
				token: params.get('token'),
				data: null
			},
			methods: {
				getData(token = null) {
					axios.get('/js2-json/v1/user-dict', {
						headers: {
							token
						}
					}).then(response => {
						this.data = response.data
					}).catch(error => {
						this.$message.error('请求失败：' + error.response.data.code + '，' + error.response.data.msg)
					})
				}
			},
			created() { }
		})
	</script>
</body>

下一篇：鼠标点击浮现随机文字

免费分享不易，赞助服务器费用

微信

支付宝

如果资源对你有帮助，可以考虑请我喝一泡八二年的单丛茶

登录后可以发表评论