在frameset，frame，iframe中如何操作其他框架中的页面以及如何刷新框架中的页面

来源：互联网发布：蚁群算法matlab代码编辑：程序博客网时间：2024/04/20 09:44

frameset，frame，iframe可以让我们很好的布局整个web页面。

每个web工程没有不用到这些的，那在frameset，frame，iframe中如何操作其他框架中的页面以及如何刷新框架中的页面？

这个是很常用的，如果你对这个不熟悉，那你只能算是个会写java后台代码的菜鸟，

前台的页面控制很能看出程序员的水平。

先看一个实际项目中的例子：

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>客户服务中心系统</title><link rel="shortcut icon" href="<%=path%>/resource/images/favicon.ico" type="image/x-icon"/></head><frameset rows="124,*,36" frameborder="no" border="0" framespacing="0">  <frame src="../jsp/hd/top.jsp" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />  <frame src="../jsp/hd/home/homeframe.html" name="mainFrame" id="mainFrame" title="mainFrame" />  <frame src="../jsp/hd/foot.jsp" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" /></frameset><noframes><body></body></noframes></html>

homeframe.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>框架</title></head><frameset cols="260,*" frameborder="no" border="0" framespacing="0" id="lrsplitframe" name="lrsplitframe">  <frame src="homeleft.jsp"  id="homeleft" name="homeleft" scrolling="no" noresize="noresize"  noresize/>  <frame src="homeright.jsp" id="homeright"  name="homeright"  scrolling="no"   noresize/></frameset><noframes><body></body></noframes></html>

如果在homeright签入一个框架页面:
module.jsp

<%@ taglib uri="/struts-tags" prefix="s"%><%String otherParam = request.getParameter("otherParam");if(otherParam == null){otherParam = "";}%><html><head><title></title></head> <frameset id="MAINFRAMESET" rows="300,10,*"  border="0" frameborder="0" frameSpacing="0">  <frameset rows="0pt,*" frameborder="NO" border="0" framespacing="0">  <frame src='<%=request.getContextPath()%>/mainMenu.action?parentMenuId=<%=request.getParameter("parentMenuId")%>&otherParam=<%=otherParam%>' id="MAINMENU" name="MAINMENU" scrolling="NO" noresize>  <frame src="" name="MAINCONTENT" noresize >  </frameset>          <frame  id="MENUBAR" name="MENUBAR" src="<%=request.getContextPath()%>/jsp/layout/menubar.jsp"  noresize scrolling="no" frameborder="0" pos="1">                    <frameset rows="35,*" frameborder="NO" border="0" framespacing="0" id="CONTENTFRAMESET">   <frame src='<%=request.getContextPath()%>/subMenu.action?parentMenuId=<%=request.getParameter("parentMenuId")%>&otherParam=<%=otherParam%>' id="SUBMENU" name="SUBMENU"  scrolling="NO" noresize>  <frame src="" name="SUBCONTENT">  </frameset></frameset><noframes><body></body></noframes></html>

整体的布局可以用一张图来看，这样更清楚：

上面的MAINCONTENT中嵌入listphonebook.jsp
我们想在listphonebook.jsp中调用其他页面的方法或者刷新某个frame中的页面应该怎么做呢？

比如homeleft.jsp中有个方法：
function gg(){
alert("gg");
}

方法1：使用parent跳出本框架再找其他框架。

一，刷新listphonebook.jsp
（
当然也可以window.location.reload();
不过这个刷新会有IE的提示框弹出，效果不是很好。
所以把右面所有页面刷新
parent.window.parent.window.frames[1].window.location.reload();
）
刷新左面homeleft.jsp
parent.window.parent.window.frames[0].window.location="xxx.jsp";
parent.window.parent.window.frames[0].window.location.reload();
二，调用homeleft.jsp中的方法
parent.window.parent.window.frames[0].gg();

parent.window是homeright
parent.window.parent.window是mainFrame
parent.window.parent.window.frames[0]是homeleft.jsp
这样就可以调用这个页面的方法gg()；

方法2：使用top跳到本页面的顶层框架，然后一层层按从外向里的顺序找到你要的页面。

一，刷新listphonebook.jsp
那在此页面可以
top.mainFrame.homeright.location="<%=path%>/jsp/layout/module.jsp?parentMenuId=hd_phonebook";
或者
top.mainFrame.homeright.location.reload();
刷新左面homeleft.jsp
top.mainFrame.homeleft.location="xxx.jsp";
或者
top.mainFrame.homeleft.location.reload();
二，调用homeleft.jsp中的方法
top.mainFrame.homeleft.window.gg();