好久没做记录,现在想通了,决定离开现在实习的公司,去找工作!俗话说“大四不考研,天天像过年!”我现在就是这样!哈哈哈哈,不过,貌似现在已经没什么大公司来学校招人了,但愿能找到好工作吧,很多同学都找到了好工作,真羡慕,不能再错过机会了,我要抓住机会!
以后把之前做项目遇到的问题都补回来,积累很重要!工作不是一辈子的事,积累才是一辈子的事!
这个是自己想的,不知道有不有其他更好的方法,欢迎各位指教!不用谢!
一个父页面下的两个iframe之间的调用。假设一个页面需要完成这样的功能,查询页面分为上下两部分,上面部分是选择查询的一个范围,下面部分就是显示选择结果可以进行的操作。上面部分的选择不同影响下面部分显示的不同。
var frames=window.parent.window.document.getElementById("bottom"); frames.contentWindow.test();
首先获取需要的iframe,然后再调用该iframe的函数。
首先是父页面jsp代码,里面定义了2个iframe框,分为上下部分,上面部分就是我们需要做判断的,下面部分就是我们判断后的结果。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据初始化</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<frameset rows="90,*" frameborder="0" border="0" framespacing="0">
<frame src="dataIni.do?method=showHead" frameborder="0" name="head" id="head" noresize>
<frame src="dataIni.do?method=showBottom&searchTable=1" frameborder="0" name="bottom" id="bottom" noresize>
</frameset>
</html>
定义好父页面后,就贴上两个ifame的代码:
两个部分的调用过程:首先对head操作,head通过selectTable这个值的变化就会调用bottom的一个函数来控制bottom的显示,而bottom又需要获得head的一个参数,于是bottom就调用head的一个函数获取参数。最后对获取的参数判断做出结论。
head代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>iframe同级间的调用</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="Update">
<script language="JavaScript">
function headTest(){
var selectTable=document.getElementById("selectTable").value;
return selectTable;
}
function test(){
var frames=window.parent.window.document.getElementById("bottom");
frames.contentWindow.test();
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="98%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td valign="bottom" class="title">上面</td>
</tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td class="td_page">查询范围
<select id="selectTable" name="selectTable" HEIGHT="10px" onchange="test()">
<option value=1>当前</option>
<option value=2>历史</option>
</select>
</td>
</tr>
</table>
</body>
</html>
bottom代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>iframe同级间的调用</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="Update">
<script language="JavaScript">
function test(){
var frames=window.parent.window.document.getElementById("head");
var selectTable=frames.contentWindow.headTest();
if(selectTable==1){
document.all.testSelect.disabled="";
}
else{
document.all.testSelect.disabled="disabled";
}
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="98%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td valign="bottom" class="title">下面</td>
</tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center">
<input id="testSelect" name="testSelect" type="button" value="调用演示">
</td>
</tr>
</table>
</body>
</html>
不知道上面的叙述能不能看明白,我在描述一下。
(1) head的selectTable值的改变调用自身test()函数。
(2) head的test()函数调用bottom的test()。
(3) bottom的test()函数调用head的headTest()函数。
(4) head的headTest()函数获取自身页面的selectTable的值并返回该值。
(5) bottom的test()函数获取调用headTest()返回的值。
(6) bottom的test()函数对获取的值做判断,并改变显示的效果。
恩!这样很清楚了!语言表达能力不好,还请多多指教。
我上传了一个工程,该工程下载后可以直接用tomcat发布、运行。该工程包括3个页面,上述提到的3个页面。下面是效果。
没了,再见!