从父页面读取和操作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 相关文章推荐
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
Element input树型下拉框的实现代码
Dec 21 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
基于php split()函数的用法详解
2013/06/05 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python制作简单五子棋游戏
2019/06/18 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
餐饮总经理岗位职责
2014/03/07 职场文书
员工自我工作评价
2015/03/06 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
详解python网络进程
2021/06/15 Python