从父页面读取和操作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的无刷新分页技术
Jun 11 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
用js实现放大镜效果
Oct 28 Javascript
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
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python实现人民币大写转换
2018/06/20 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
机器学习实战之knn算法pandas
2019/06/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
手写一个python迭代器过程详解
2019/08/27 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
大专生工程监理求职信
2013/10/04 职场文书
高二化学教学反思
2014/01/30 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技