使用场景：页面大部分相同，少部分不一样。比如系统，每一个页面的left_nav和top内容一致，右下边内容在改变。

优点：提高页面代码的重复使用率，让我们偷懒。

缺点：页面url地址没有改变。

本案例用layui，搭建一个简单的后台管理系统框架。

文件结构如下，layui在官网下载即可。

index.html页面代码

注意：里面iframe标签的使用，通过改变iframe标签的src属性来改变iframe是内容

以下是main.html代码

以下是set.html代码

以下是test1.html页面代码

打开index.html页面显示效果

点击基础设置的页面是

后期在使用过程中，发现iframe有个坑，即在顶级页面，点击跳转到子页面，再点击顶级页面，但是页面显示的是子页面的内容。例如，在上图中的基础设置页面，点击按钮点击切换到test1页面，再点击左边导航基础设置，但是页面显示的是test1.html页面的内容，即无法回到顶级页面基础设置页面，此问题的解决方案是给test1.html添加一个面包屑或者返回按钮。