从父页面读取和操作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 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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 不错的学习资料
2009/02/06 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学生实习证明范文
2014/09/28 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby