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

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

心已赠人 2022-05-27 12:08 308阅读 0赞

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();