页面嵌套

在做项目的时候我们经常要实现一个功能就是页面嵌套。如何实现在一个页面中嵌套另一个子页面呢?其实很简单,我们只需要一个iframe标签。

iframe标签的效果就是在这个页面中填写路径使得另一个路径的页面成为它的子页面,从而实现页面嵌套的效果。iframe有一个src属性,和image标签属性相同。src属性就是html指向url的一个标识,想要跳转到什么页面填入路径即可。

例如
页面嵌套

在页面中嵌套了百度的首页。

我们看到如下效果

页面嵌套

百度首页被我成功嵌套了进来。

但是这个时候我们会发现一个问题,百度的网页被压缩的只剩下顶部的一部分了。这样既不美观也影响用户实际操作,那么我们如何该如何解决呢?

我们需要根据浏览器的大小来调整iframe的高度。

我们给它一个方法,重新设置浏览器的高度。首先我们要去获取浏览器内部的高度

页面嵌套

获取之后我们便可写核心代码

页面嵌套

根据获取的浏览器窗口的高度,在判断浏览器顶部底部各种边框所占的高度,最后我们获取到嵌套页面所适高度应该为浏览器高度减去110个像素的高度。

下面我们来看下效果

页面嵌套

这样我们的页面就被撑开了。

注:最好撑开到没有滚动条的高度,因为当外部有滚动条,子页面也有滚动条的时候,压缩浏览器就会出现两个滚动条的情况,影响美观与实际操作。