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


Posted in Javascript onJuly 25, 2009

基本的操作方法:
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对象后,其操作基本没什么特别之处。

Javascript 相关文章推荐
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
js 字符串操作函数
Jul 25 #Javascript
javaScript Array(数组)相关方法简述
Jul 25 #Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 #Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 #Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
python处理xml文件的方法小结
2017/05/02 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
django 外键model的互相读取方法
2018/12/15 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python&Matlab实现樱花的绘制
2022/04/07 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers