iframe系统布局

最新推荐文章于 2022-03-29 10:25:27 发布

原创最新推荐文章于 2022-03-29 10:25:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #布局 #系统

工作笔记专栏收录该内容

24 篇文章

订阅专栏

该博客介绍了如何使用iframe进行系统布局。系统分为三个模块区，通过web.xml设置欢迎页为index.jsp，重定向到main.jsp。main.jsp中，left.jsp显示功能菜单，点击菜单会改变center.jsp的内容，实现页面动态跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常系统分为三个功能模块区域

首先通常web.xml的欢迎页是index.jsp

通过重定向：

<%
	response.sendRedirect("/main");
%>

具体的框架的发送请求方式不同，根据具体情况而定，由此请求，进入main.jsp页面

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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
    <%@ include file="/resources/common/jsp/meta.jsp" %>

  </head>
  
  <frameset frameborder="no" border="0" framespacing="0" rows="50,*" cols="*">
	  <frame scrolling="No" noresize="noresize" src="<%=path %>/resources/common/jsp/header.jsp" />
	  <frameset frameborder="no" border="0" framespacing="0" rows="*" cols="213,*">
	    <frame scrolling="No" noresize="noresize" src="<%=path %>/resources/common/jsp/left.jsp" />
	    <frame noresize="noresize" name="mainFrame" src="<%=path %>/resources/common/jsp/center.jsp" />
	  </frameset>
  </frameset>
  <noframes>
  <body>
  </body>
  </noframes>
</html>

这一页就能将页面分割成三个区域了，从代码上看，分成了header.jsp、left.jsp、center.jsp这三个页面，就是上、左、中间的布局就形成了。

那么通常left.jsp是功能菜单项，点击此菜单不同的功能项，中间的区域会跳转到不同的页面，所以是left.jsp的链接控制center.jsp页面的内容。

那么看看left.jsp的链接是如何写的：

<a href="javascript:void(0);" onclick="parent.frames['mainFrame'].location='<%=path%>/demo/test'">例子</a>

因为在main.jsp中定义了中间的frame的name为“mainFrame”所以这里的链接通过找父级的frames叫做mainFrame的设置它的url就是location即可

parent.frames['mainFrame'].location = yourUrl