用iframe完成页面嵌套

作者：吱韩菌
开发工具：Visual Studio 2015
撰写时间：2019-5-31

今天要给大家展示的是如何运用iframe标签完成页面嵌套。下面我们要做的是用iframe完成页面嵌套后，点击（选座、办登机牌）按钮，能够实现页面切换。

代码部分主要分为三部分，第一部分是按钮和iframe标签部分，这一部分需要做的是搭建好能够实现点击功能的按钮和能够嵌套页面的iframe标签，还需要给它们添加ID，iframe标签给它设置了width=100%，是让显示的页面宽度为原来的100%，至于border:0px; 是因为使用了插件出现了不需要的边框，border:0px;能够清除插件带来的边框影响。

第二部分是JS部分，获取ID点击按钮实现点击事件，通过点击后调用封装好的方法$("#content").attr(“src”, “/Service/FWService/check”) 点击按钮可以切换iframe嵌套的页面，/Service/FWService/check 是通过路径获取到需要切换的页面。

第三部分就是需要嵌套的页面部分，需嵌套的页面需要建一个新页面在搭建，但在搭建页面时最好先嵌套成功再搭建，因为这样比较方便。

最后需要注意的是当显示的iframe高度不合适时，可以通过$("#content").height((windowsHeight - 110) + “px”);，windowsHeight获取iframe页面高度，调试合适为止，windowsHeight调节的高度都是数字，还需要加上“px”，否在无法实现效果。

用iframe完成页面嵌套相关推荐

Django iframe重定向页面嵌套问题
当我们使用django开发网站时,有时会使用到iframe技术,iframe直接在页面之上展示内容,十分方便,但是当我们需要在iframe页面中进行重定向(redirect)到一个url时会出现嵌套页 ...
iframe标签（页面嵌套）
开发工具与关键技术:VS <iframe> 作者:听民谣的老猫撰写时间:2019/6/10 18:15 上面两张图是两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏改变的 ...
iframe页面嵌套问题
iframe页面嵌套问题开发工具与关键技术:VisualStudio C# 作者:落灵撰写时间:2019/6/8 一. iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框 ...
页面嵌套iframe
一.使用场景: 项目中带调用其他项目接口,iframe嵌套对方接口数据页面,所以将iframe嵌套在本项目的页面,当接口返回数据,页面的标题,头部,和尾部依旧是本项目的,数据是调用接口的数据. 二. ...
iframe和iframe实现页面内嵌套一个页面（jsp）
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面,点击不同的导航栏按钮,下方就会显示不同内容,这就用到了iframe标签的src属性.下面就给大家介绍一下iframe的使用 ...
h5 iframe嵌套页面_如何将一个HTML页面嵌套在另一个页面中
展开全部这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要 ...
页面嵌套iframe怎么调用父页面的方法，子页面回调父页面函数方法
父页面要有此函数 //子页面回调此函数 IndexCallback = function() {console.log('我是父页面的方法') } 子页面回调父页面的方法 window.parent. ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
如何将一个HTML页面嵌套在另一个页面中
如何将一个HTML页面嵌套在另一个页面中 2010-05-05 16:45 559人阅读评论(1) 收藏举报这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页 ...

用iframe完成页面嵌套

用iframe完成页面嵌套相关推荐

最新文章

热门文章