使用场景：页面大部分相同，少部分不一样。比如系统，每一个页面的left_nav和top内容一致，右下边内容在改变。
优点：提高页面代码的重复使用率，让我们偷懒。
缺点：页面url地址没有改变。
本案例用layui，搭建一个简单的后台管理系统框架。
文件结构如下，layui在官网下载即可。
index.html页面代码
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
link
rel=
"stylesheet"
href=
"./layui/css/layui.css"
>
<
style
>
html,body {
width:
100%;
height:
100%;
}
.side_left {
height:
100%;
}
.message {
margin:
-8px
28px
0
!important;
border-radius:
50%;
top:
31%
!important;
}
.title {
position:
absolute
!important;
/* left: 200px; */
top:
0;
color:
rgba(
255,
255,
255,
.7);
padding:
0
20px;
line-height:
60px;
font-size:
22px;
font-weight:
600;
}
.content {
top:
100px;
}
<
/
style
>
</
head
>
<
body
>
<
nav
class=
"ayui-layout-admin"
style=
"height:60px;background:#393D49;"
>
<!-- 标题 -->
<
h1
class=
"title"
>后台管理系统
</
h1
>
<
ul
class=
"layui-nav layui-layout-right"
>
<
li
class=
"layui-nav-item"
>
<
a
href=
"#"
>通知
<
span
class=
"layui-badge message"
>9
</
span
>
</
a
>
</
li
>
<
li
class=
"layui-nav-item"
>
<
a
href=
"#"
>退出
</
a
>
</
li
>
<
li
class=
"layui-nav-item"
>
</
li
>
</
ul
>
</
nav
>
<
ul
class=
"layui-nav layui-nav-tree layui-inline side_left"
>
<
li
class=
"layui-nav-item layui-this"
>
<
a
href=
"./index.html"
>
<
i
class=
"iconfont icon-shouye1"
></
i
>
首页
</
a
>
</
li
>
<
li
class=
"layui-nav-item layui-nav-itemed"
id=
"changeToSet"
>
<
a
href=
"javascript:;"
>
<
i
class=
"iconfont icon-shouye1"
></
i
>
基础设置
</
a
>
</
li
>
</
ul
>
<
div
class=
"layui-body content"
>
<iframe src="./main.html" frameborder="0" id="contentIframe"></iframe>
</
div
>
</
div
>
<
script
src=
"./jquery-3.2.1.min.js"
>
<
/
script
>
<
script
src=
"./layui/layui.js"
>
<
/
script
>
<
script
>
$(
function(){
$(
'#changeToSet').
on(
'click',
function(){
$(window.parent.document).find('#contentIframe').attr('src','./set.html')
$(
this).
addClass(
'layui-this').
siblings().
removeClass(
'layui-this');
})
})
<
/
script
>
</
body
>
</
html
>
注意：里面iframe标签的使用，通过改变iframe标签的src属性来改变iframe是内容
以下是main.html代码
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
h1
>这是首页标题
</
h1
>
<
p
>你好，我是首页页面内容
</
p
>
</
body
>
</
html
>
以下是set.html代码
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
h1
>这是基础设置页面标题
</
h1
>
<
p
>你好，我是基础设置页面内容
</
p
>
<
button
id=
"changeToTest1"
>点击切换到test1页面
</
button
>
<
script
src=
'./jquery-3.2.1.min.js'
>
<
/
script
>
<
script
>
$(
function(){
$(
'#changeToTest1').
on(
'click',
function(){
$(
window.
parent.
document).
find(
'#contentIframe').
attr(
'src',
'./test1.html')
})
})
<
/
script
>
</
body
>
</
html
>
以下是test1.html页面代码
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
h1
>这是test1页面标题
</
h1
>
<
p
>你好，我是test1页面内容
</
p
>
</
body
>
</
html
>
打开index.html页面显示效果
点击基础设置的页面是
