同级iframe间的函数调用

最新推荐文章于 2022-11-26 20:51:55 发布

最新推荐文章于 2022-11-26 20:51:55 发布 · 582 阅读

文章标签：

#CSS #Cache #HTML #JavaScript #Tomcat #ViewUI

本文介绍了一个具体的iframe间交互案例，展示了如何通过JavaScript实现父页面与子iframe页面间的双向通信，包括选择查询范围后触发底部操作区域变化的具体实现。

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

好久没做记录，现在想通了，决定离开现在实习的公司，去找工作！俗话说“大四不考研，天天像过年！”我现在就是这样！哈哈哈哈，不过，貌似现在已经没什么大公司来学校招人了，但愿能找到好工作吧，很多同学都找到了好工作，真羡慕，不能再错过机会了，我要抓住机会！

以后把之前做项目遇到的问题都补回来，积累很重要！工作不是一辈子的事，积累才是一辈子的事！

这个是自己想的，不知道有不有其他更好的方法，欢迎各位指教！不用谢！

一个父页面下的两个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个页面。下面是效果。