frameset 框架使用 以及跨页面请求
页面布局：
1.index.html: 页面只识别frameset,frame标签，其余标签全部不识别
<!DOCTYPE
html>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>后台管理</title>
</head>
<framesetrows="47,*"cols="*"frameborder="no"border="0"framespacing="0">
<framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"id="topFrame"title="topFrame"/>
<framesetcols="167,*"frameborder="no"border="0"framespacing="0">
<framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"title="leftFrame"/>
<framesrc="main_home.html"name="rightFrame"id="mainFrame"title="rightFrame"/>
</frameset>
</frameset>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</html>
2.跨页面请求事件： 点击“退出按钮”弹出遮罩层，推出提示框
top.html: 退出按钮绑定退出事件： onclick="quit()"
function
quit(){
localStorage.setItem("shade",1);
var
right =
window.parent.rightFrame;
var
ele_pop =
right.document.getElementById("layuiLayer");
var
ele_shade = right.document.getElementById("layuiLayerShade");
$(ele_pop).show();
$(ele_shade).show();
}
right.html: html页面添加弹框
具体代码：
<!--
退出弹框 -->
<divid="layuiLayerShade"class="layui-layer-shade"style="display:none;z-index:19891015;background-color:#000;opacity:0.3;filter:alpha(opacity=30);"></div>
<divclass="layui-layer
layui-anim layui-layer-dialog "id="layuiLayer"style="display:none;z-index:19891015;top:197px;left:426px;">
<divclass="layui-layer-title">退出</div>
<divid=""class="layui-layer-content">您确定要退出这个系统吗？</div>
<spanclass="layui-layer-setwin">
<aclass="layui-layer-ico
layui-layer-close layui-layer-close1"href="javascript:;"onclick="quitCancle()"></a>
</span>
<divclass="layui-layer-btn">
<aclass="layui-layer-btn0"onclick="quitSure()"href="login.html">确定</a>
<aclass="layui-layer-btn1"onclick="quitCancle()">取消</a>
</div>
</div>
<!--
退出弹框 -->
在right.html 中再接着写 确定，取消，关闭按钮的弹框就好了。
3.这里还有个问题：
遮罩层只覆盖了right.html,页面头部，左侧导航没有遮罩层还可以点击
解决办法： 本地存储
①top.html , left.html 页面都添加遮罩层，默认隐藏
②本地存储 默认：localStorage.setItem("shade",0);
遮罩层隐藏
③ 弹框弹出时设置本地存储： shade: 1; 关闭时： shade: 0;
④ 鼠标移动时触发事件，显示或隐藏top.html , left.html 的遮罩层
$(document).mousemove(function(){
var
shade =
localStorage.getItem("shade");
if(shade==0){
$(".shade").hide();
}else{
$(".shade").show();
}
});
4.跳转页面
一般： location.href 只是局部页面的刷新，跳转
top.location.href 是整个页面框架的刷新，跳转