从父页面读取和操作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面向对象之二 命名空间
Feb 08 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 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 Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解react-redux插件入门
2018/04/19 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
使用python分析git log日志示例
2014/02/27 Python
python中map、any、all函数用法分析
2015/04/21 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python求最大连续子数组的和
2018/07/07 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
新学期开学演讲稿
2014/05/24 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
网络营销计划
2015/01/17 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python