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

Javascript
Javascript 学习笔记 错误处理
Javascript 类的继承实现代码
JavaScript 创建对象和构造类实现代码
JavaScript 学习小结(适合新手参考)
extjs 列表框(multiselect)的动态添加列表项的方法
javascript getElementsByName()的用法说明
Document 对象的常用方法
JS 事件冒泡 示例代码
JS 面向对象的5钟写法
JS 输入字数判断实现代码
Javascript 汉字字节判断
JavaScript 关键字屏蔽实现函数
一句话JavaScript表单验证代码
利用javascript实现一些常用软件的下载导航
jQuery 相关控件的事件操作分解
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
JavaScript 异步调用框架 (Part 2 - 用例设计)
JavaScript 异步调用框架 (Part 3 - 代码实现)
JavaScript 异步调用框架 (Part 4 - 链式调用)
JavaScript 异步调用框架 (Part 5 - 链式实现)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 328 ::
收藏到网摘: 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对象后,其操作基本没什么特别之处。