让页面从主页面跳转进来
开发工具与关键技术:Visual Studio 2015
作者:徐晶旗
撰写时间:2019年4月6日
怎么在一个网页中嵌入另一个网页呢?我们可以用html中的iframe标签来搞定。
iframe标签规定一个内联框架,Iframe元素会创建包含另外一个文档的内联框架(即行内框架),一个内联框架被用来在当前html文档中嵌入另一个文档。
如何在系统设置里点击一下学院信息基础维护会跳出下面这个页面呢?
首先在视图中找到学院基础信息维护,在学院基础信息维护这里的父级标签li中找到它ID的名称,
来点击这个id名称实现嵌套内容,接下来我们要获取这个id,也就是获取当前内容 。
所以要在iframe中嵌套内容,先给他一个具体的内容,”content”,来作为它的id,要点击系统设置里的学院信息维护进行嵌套
首先要用js来实现这个页面嵌套,接下来要获取这个li标签里的ID“collegeInfore”,触发它的单击事件,给iframe嵌套页面内容,找到content这个id,给它添加操作属性attr,然后通过这个操作属性来链接它的路径, src用于设置框架的地址,通过链接的方式得到一个具体的页面, 所以用src来赋值一个url,找到要嵌套页面的路径,也就是所在位置,把另外一个页面嵌套进来。
这是要嵌套页面的所在地址
这个时候呢点击一下学院信息基础维护是出来了我想要出来的页面,但是它的iframe不会自动适应页面大小的高度,它都压缩在一个固定的高度。要滚动滑轮才会出现所有数据,所以这样即麻烦又影响美观。
所以接下来就要运用Iframe的自适应高度属性,可以自动随着窗口大小改变自己的大小,也就是说可以根据自身内容调节高度,使其等于内嵌网页的高度,对于用户体验和网站美观也起着重要作用。
设置iframe的高度,自定义一个函数,Windows对象的一个属性window.innerHeight;获取窗口文档显示区的高度,页面数据有多高,它就获取多高,然后声明一个变量接收当前窗体可视高度,能够随着页面的长度自动的适应以免除页面和iframe同时出现滚动条的现象。
看,最后运行一下再点击一下学院信息基础维护这个页面就出来了,这样看上去就美观多了。
注:图片来自老师上课内容,有些地方解说不当还望大家多多指教(●’◡’●)