从父页面读取和操作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控件
May 07 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
javascript call方法使用说明
Jan 11 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
如何提高数据访问速度
Dec 26 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python实现神经网络感知器算法
2017/12/20 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Django中使用Celery的方法步骤
2020/12/07 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
单位收入证明范本
2015/06/18 职场文书
交通安全教育主题班会
2015/08/12 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
代码复现python目标检测yolo3详解预测
2022/05/06 Python