jsp frameset锁定整个框架页面

最新推荐文章于 2022-05-16 19:52:24 发布

qinxuanqin

最新推荐文章于 2022-05-16 19:52:24 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： frameset锁定界面文章标签：解决方案 jsp java framest锁定界面

本文链接：https://blog.youkuaiyun.com/qinyingqin1/article/details/13289755

frameset锁定界面专栏收录该内容

1 篇文章

订阅专栏

本文详细阐述了解决使用frameset布局时，如何实现锁定整个界面的页面功能，通过编写特定的JSP页面和JavaScript代码，实现了在不同子页面间切换时保持顶部导航栏和左侧树状菜单不被刷新的效果。

前段时间要开发一个锁定页面的功能，看了下自己系统的界面居然是frameset纠结了，网上查了好多资料都没有正确的解决方案，现在解决了贴出来，让下一个遇到同样问题的人能有所帮助。
标注：http://bbs.youkuaiyun.com/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));
 }