您的位置：首页 > Web前端 > JavaScript

jsp frameset锁定整个框架页面

2013-10-28 11:14 211 查看
前段时间要开发一个锁定页面的功能，看了下自己系统的界面居然是frameset纠结了，网上查了好多资料都没有正确的解决方案，现在解决了贴出来，让下一个遇到同样问题的人能有所帮助。

标注：http://bbs.csdn.net/topics/310252750是从这个贴得到的启发并参照修改解决，感谢jiusss。

解决思路：frameset我暂时没找到可以一步到位就能锁定整个界面的，所以利用frames取得各个frame的参数来分别调用覆盖的方法，来解决这个问题。以下是代码

写一个TitleTop.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'TitleTop.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/common.js?v=1232111"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

</head>

<body>
top<br><input type=text id="id" name="id" value=""/>
</body>
</html>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="/common.js?v=1232111"></script>
</head>

<body>
tree<br><input type=text id="id" name="id" value=""/>
</body>
</html>

main.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'main.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<frameset rows="105,*" cols="10"  frameborder="NO" border="0" >
<frame src="TitleTop.jsp" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="250,*" frameborder="yes" border="1"  framespacing="0"bordercolor="#FF0000">
<frame src="index.jsp" name="treeFrame" scrolling="no" noresize="noresize" id="treeFrame" title="treeFrame" />
<frame src="MyJsp.jsp" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset><noframes></noframes>

</html>


调用页面MyJsp.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="/common.js?v=1232111"></script>
</head>

<script type="text/javascript" >
function covertScreen()
{
window.parent.frames["topFrame"].openNewDiv("overlay","overlayMsg","top");
window.parent.frames["treeFrame"].openNewDiv("overlay","overlayMsg","top");
openNewDiv("overlay","overlayMsg","menu");
}
</script>

<body>

<input id="Button1" type="button" value="我是right页面的按钮，点击弹出遮幕层！" onclick="covertScreen()" />
<input type=text id="id" name="id" value=""/>

</body>

</html>


添加一个common.js

var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(overlayID,msgID,wintype) {
var msgw,msgh,bordercolor;
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色
if (docEle(overlayID)) docEle(overlayID).removeNode(true);
if (docEle(msgID))docEle(msgID).removeNode(true);

var scrolltop = window.pageYOffset  || document.documentElement.scrollTop  || document.body.scrollTop || 0;

var _clientheight=0;

//ie FF  在有DOCTYPE时各有区别
_clientheight = Math.min(document.body.clientHeight , document.documentElement.clientHeight);
if(_clientheight==0)
_clientheight= Math.max(document.body.clientHeight , document.documentElement.clientHeight);

var _clientwidth= document.documentElement.clientWidth || document.body.clientWidth;
//整个页面的高度
var _pageheight =  Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
// 消息显示
var newDiv = document.createElement("div");
newDiv.id = msgID;
if(wintype=="menu"){
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "400px";
newDiv.style.height = "120px";
var msgtop = (((_clientheight-200)/2))+"px";
var msgleft = (_clientwidth-300)/2+"px";
newDiv.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
newDiv.style.top = msgtop;
newDiv.style.left =msgleft; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #777";
newDiv.style.padding = "5px";
newDiv.innerHTML = "<br/><br/>    <strong><img src='/images/spinner.gif' />温馨提示：系统正在处理您提交的请求，请稍候...</strong>";
}
document.body.appendChild(newDiv);

// 锁屏图层
var newMask = document.createElement("div");
newMask.id = overlayID;
newMask.style.position = "absolute";
newMask.style.zIndex = "9998";
newMask.style.width = _clientwidth + "px";
newMask.style.height =_pageheight+ "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#EFEFEF";
newMask.style.filter ="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);

}
function closeNewDiv(overlayID,msgID,wintype){
document.body.removeChild(docEle(overlayID));
document.body.removeChild(docEle(msgID));
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航