从父页面读取和操作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 相关文章推荐
jQuery动态地获取系统时间实现代码
May 24 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Django  ORM 练习题及答案
2019/07/19 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
企业厂长岗位职责
2013/12/17 职场文书
青春无悔演讲稿
2014/05/08 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书