从父页面读取和操作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 字符串乘法
Aug 20 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Vue之Watcher源码解析(2)
Jul 19 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
vue模块移动组件的实现示例
May 20 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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
javascript操作css属性
2013/12/30 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python图算法实例分析
2016/08/13 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
市场营销方案范文
2014/03/11 职场文书
规划编制实施方案
2014/03/15 职场文书
房产公证书
2015/01/23 职场文书
个人廉政承诺书
2015/04/28 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang