当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 从父页面读取和操作iframe中内容方法

Javascript
javascript实例教程(19) 使用HoTMetal(5)
javascript实例教程(19) 使用HoTMetal(6)
javascript实例教程(19) 使用HoTMetal(7)
javascript实例教程(20) OLE Automation(1)
javascript实例教程(20) OLE Automation(2)
javascript实例教程(20) OLE Automation(3)
javascript实例教程(20) OLE Automation(4)
javascript实例教程(20) OLE Automation(5)
javascript实例教程(20) OLE Automation(6)
javascript实例教程(20) OLE Automation(7)
用javascript实现利用FLASH嵌入声音
javascript版的日期输入控件(6)
javascript设计网页中的下拉菜单
javascript设计漫天雪花
javascript制作浮动的工具条
javascript制作闪烁的边框
javascript模拟游戏中的弹出菜单效果
在IE中使用javascript
利用javascript制作简单动画
首页地址添加到收藏夹(javascript)

Javascript 中的 从父页面读取和操作iframe中内容方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 510 ::
收藏到网摘: n/a

在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。 基本的操作方法:
document.frames("frame_id").document.action;
其中,frame_id是该父页面需要进行操作的iframe的id,action是iframe中的相关操作。
从该方法中,可以看出 document.frames("frame_id")是用来从父页面中获取iframe的id的,而后面的document.action同一般的脚本对页面元素操作一样,具体举个例子来说明一下,其中父页面引用iframe部分如下:
复制代码 代码如下:

<div id="region1" name="region1">
<iframe onload="iframe_test()" frameborder="0" scrolling="no" width="100%" height="500" name="test_iframe" id="test_iframe" src="/testIframe.jsp" src="testIframe.jsp"></iframe>
</div>

testIframe.jsp如下:
复制代码 代码如下:

<%@ page language= "java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>test_iframe</title>
</head>
<body>
<table class="data_form" align="center">
<tr>
<th>testname</th>
<td><input name="testname" type="text" id="testname" value="testname" ></td>
</tr>
<tr>
<th>description</th>
<td><input name="decription" type="text" id="decription" value="testname" /></td>
</tr>
</table>
<br>
<div >
<input name="fs" type="submit" id="fs" value="test" onClick="alert('test');" class="button">
</div>
</body>
</html>

父页面中对iframe元素操作的script脚本如下:
复制代码 代码如下:

<script type="text/javascript"><!--
function iframe_test(){
if (document.frames("test_iframe").document.getElementById("testname").value=="testname")
{
alert("test successful!");
}
if(document.frames("test_iframe").document.getElementById("decription").value=="")
{
document.frames("test_iframe").document.getElementById("decription").value="description"
}
}
// --></script>

此例描述了在父页面中读取iframe中元素以及在父页面中修改iframe中元素的属性。
通过此例,我们可以看出,在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。