`
maoxy
  • 浏览: 141591 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

同级iframe间的函数调用

阅读更多

 

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

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

 

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

 

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

 

 

 

没了,再见!

 

 

 

 

 

 

3
0
分享到:
评论

相关推荐

    python 同级目录下的模块间的调用方法以及代码

    同级目录下的模块间调用是常见的需求,这涉及到Python的导入机制和文件结构的理解。本文将深入探讨这一主题,提供详细的步骤和示例代码。 首先,理解Python的模块(module)概念至关重要。一个模块是一个包含Python...

    pycharm 使用心得(八)如何调用另一文件中的函数

    实现步骤: 1. PyCharm, IDE有个Project setting图标,是给run图标做配置的,配置run file为myfile.py2.复制代码 代码如下:# ————————————–#! /usr/bin/python# File: myfile.py# Author: Michael Fan ...

    matlab的函数类型.pdf

    2)相同父级的同级嵌套函数可相互调用;3)处于低层的嵌套函数可调用任意父级函数。 此外,Matlab 还提供了多种数据导入和导出途径,包括使用界面导入向导、load 函数和 dlmread 函数等。Matlab 支持的主要数据文件...

    js调用窗体程序,窗体调用js

    本文将详细介绍如何在WinForm应用中调用JavaScript函数,以及如何在JavaScript中反向调用WinForm的方法。 1. WinForm调用JavaScript函数 - WebBrowser控件:在WinForm应用中,可以使用内置的WebBrowser控件来加载...

    动态加载js、css等文件跨iframe实现

    *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram(“这个方法在调用其他子farme”); 1.jquery的append() 代码如下: 速度快,同步(需要引入jquery) var oBody = document.getElementById...

    在Python 不同级目录之间模块的调用方法

    1. **同级目录模块的调用**:如果两个模块在同一层级,比如`t1.py`要调用`t2.py`中的函数`func()`,可以直接导入并使用: ```python import t2 t2.func() ``` 2. **上级目录调用下级目录**:如果下级目录包含一个...

    多个iframe,其中一个的div能够处于最上层显示

    在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。...

    matlab的函数类型[整理].pdf

    主函数是文件中可以直接在命令窗口或其他函数中调用的函数,而子函数只能被主函数或其他在同一.m文件中的子函数调用。子函数之间的变量不能直接共享,除非声明为全局变量或通过参数传递。例如,`newstats`是主函数,...

    多个对话框之间相互调用

    本文将深入探讨“多个对话框之间相互调用”的概念,并讲解如何实现两个同级子对话框间的数据交换,以及模态和非模态对话框的创建与调用。 首先,我们来看“多个对话框之间相互调用”。这通常涉及到在主窗口中打开一...

    使用jquery/js获取iframe父子级、同级获取元素的方法

    在使用iframe时,我们常常需要获取iframe中的元素,或者在iframe中获取父窗口的元素。这种需求的解决方法主要可以借助JavaScript和jQuery来实现。 首先,我们来看如何在父窗口中获取iframe内的元素。如果iframe设置...

    wincc函数详解

    1. **ActivateRightScreen**:此函数用于切换到当前屏幕右侧的同级屏幕。如果右侧没有其他屏幕,则不会进行切换。在“画面浏览”编辑器中预先配置好浏览结构是使用这个函数的前提。 2. **ActivateRootScreen**:此...

    Linux下使用Java调用Hikvision设备网络SDK的使用指南.pdf

    .so文件即Shared Object的简称,在Linux环境下是指编译好的函数库,可被其他程序调用。在功能上,.so文件与Windows系统中的.dll文件类似,都是为了实现函数和数据的共享。Linux操作系统中函数库至关重要,因为许多...

    ORACLE 分析函数大全

    这样,`c_mavg`列展示了每个员工薪资相对于其同级经理手下其他员工的平均值。 除了`AVG()`,还有其他多种分析函数,例如: 1. `RANK()`: 返回每个行在其分组中的排名。 2. `DENSE_RANK()`: 类似于`RANK()`,但当有...

    jquery函数使用

    使用`.next()`方法可以选取当前元素的下一个同级元素。例如,`$("div").find("li").eq(0).next().css('background','red');`将选取第一个`li`元素的下一个`li`元素并改变其背景色。 7. **选择一部分元素**: `:lt...

    essbase的计算函数和相关命令

    根据提供的信息,我们可以深入探讨关于Essbase中的计算函数与相关命令。Essbase是IBM Cognos的一个关键组件,主要用于多维数据分析,它提供了一系列强大的计算功能来帮助用户进行复杂的数据分析工作。以下将详细介绍...

    JQuery常用函数及功能

    当页面DOM结构完全加载完毕后,上述代码中的函数将被调用。这意味着页面中的所有元素都已经可用,并且可以安全地对其进行操作。 #### 二、添加/删除 CSS 类 通过JQuery可以轻松地为HTML元素添加或删除CSS类,从而...

Global site tag (gtag.js) - Google Analytics