从父页面读取和操作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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
vue-swiper的使用教程
Aug 30 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
详解javascript replace高级用法
Feb 17 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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js实现聊天对话框
2020/02/08 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
乡镇创先争优活动总结
2014/08/28 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年化验员工作总结
2015/04/10 职场文书
会议简报格式范文
2015/07/20 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
MySQL中order by的执行过程
2022/06/05 MySQL