快速实现 iframe 嵌套页面

快速实现 iframe 嵌套页面

需求背景

现在有一个需求,就是需要在当前项目的一个页面中嵌套其他系统通过接口API返回的一个页面,首先考虑的就是 iframe 嵌套页面,于是就在当前页面尝试了一下,效果还是不错的。

页面操作

首先需要在父页面引入一个 iframe 标签,用于放置接口传过来的页面

html 复制代码
<iframe id="tab1" width="100%" height="300"></iframe>

其中,参数 width 用来设置 iframe 的宽度, height 用来设置 iframe 的高度。

页面 js 代码如下

javascript 复制代码
//基础信息 tab
function tab1() {
  console.log("tab1 click");
  var url = prefix+"/toIframe?id=1&name=张三";
  $('#tab1').attr("src",url);
}

这里的 tab1 方法是为 tab 绑定的一个方法,你可以简单的理解为一个按钮,当点击按钮后,就会为指定的 iframe 嵌套页面。

iframe 后面的拼接参数 ?id=1&name=张三 就是在嵌套页面需要接收到参数。

后端代码

在后端 controller 添加方法,并返回待 iframe 嵌套的页面,

java 复制代码
@RequestMapping("/toIframe")
public String getIframe(HttpServletRequest request,ModelMap mmap) {
    String id = request.getParameter("id");
    mmap.put("id",id);
    String name = request.getParameter("name");
    mmap.put("name",name);
    return prefix + "/iframe";
}

待嵌套的子页面代码 iframe.html 代码如下

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
  <h2>这是一个嵌套页面,参数id:[[${id}]],name:[[${name}]]</h2>
</body>
</html>

那么前端页面代码及后端页面代码都准备好之后,启动项目,我们来看一下效果

当然,如果你想在 js 方法中动态控制 iframe 的宽高,可以如下更改按钮点击事件绑定的方法 tab1()

javascript 复制代码
//基础信息 tab
function tab1() {
  console.log("tab1 click");
  var url = prefix+"/toIframe?id=1&name=张三";
  $('#tab1').attr("src",url);
  $('#tab1').attr("width",500);
  $('#tab1').attr("height",500);
}

效果如图

或者也可以如下更改按钮点击事件绑定的方法 tab1()

javascript 复制代码
//基础信息 tab
function tab1() {
  console.log("tab1 click");
  let element = document.getElementById("tab1");
  element.width=300;
  element.height=300;
  var url = prefix+"/toIframe?id=1&name=张三";
  $('#tab1').attr("src",url);
}

项目热部署后刷新页面效果如图

总结

总的来说,通过 iframe 嵌套页面的方式可以将通过接口传来的页面完整的嵌入到当前页面中,且页面内容不会受影响导致不能用,这就使得在获取其他系统数据时有了更多的选择,可以直接在其他系统将数据组装成完整页面后传入当前系统嵌套展示,而不是通过接口传输数据,然后在当前页面重新渲染的情况,这样可以很大的提升两边的开发效率,有一定的应用场景。

相关推荐
红中马喽3 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新4 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
Dread_lxy5 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
奔跑草-6 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与6 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
前端郭德纲6 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR6 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式
帅帅哥的兜兜6 小时前
CSS:导航栏三角箭头
javascript·css3
渗透测试老鸟-九青7 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图7 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js