HTML页面通过iframe嵌套Vue项目

● 项目篇 同时被 2 个专栏收录
9 篇文章 0 订阅
7 篇文章 0 订阅

之前都是在Vue项目中通过iframe嵌套外部写好的HTML页,但是最近接触了一个需求,是需要在HTML页面中嵌入Vue项目。

Vue项目打包完成之后会形成一个包含所有静态资源的文件夹,点击HTML页可以运行(后端解决的跨域),现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页,在test.html中有几个input框,输入完成之后点击搜索按钮,Vue项目会显示出来,同时请求了后端接口数据进行显示(接口是在Vue项目中请求的,参数是通过window.location.href获取的)。

解决方案:
test.html中引入vue.js文件,创建input框和搜索按钮,当点击按钮的时候加载iframe嵌套的html页。

<!-- 条件搜索区 -->
<div>
    <el-input v-model="CourseId" clearable placeholder="请输入条件"></el-input>
    <el-button type="primary" @click="getExamReport">搜索</el-button>
</div>
<!-- 内容展示区 -->
<div class="main-content">
    <iframe id="refFrame" width="0" height="0"></iframe>
</div>

methods: {
	getExamReport() {
	   // Vue项目打包后的存放路径 + 参数
	   const url = `http://xxx.html?CourseId=${this.CourseId}`
	   // iframe的请求地址以及显示样式
	   document.getElementById("refFrame").src = url
	   document.getElementById("refFrame").height = 640
	   document.getElementById("refFrame").width = 360
	}
}
  • 1
    点赞
  • 4
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值