从父页面读取和操作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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
广告切换效果(缓动切换)
May 27 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
React如何实现浏览器打印部分内容详析
May 19 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 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python+opencv实现动态物体追踪
2018/01/09 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
params有什么用
2016/03/01 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
《大海那边》教学反思
2014/04/09 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书