从父页面读取和操作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实现随机返回数组的一个元素
Aug 13 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
js实现不重复导入的方法
Mar 02 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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
基于initPHP的框架介绍
2013/04/18 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
js编写选项卡效果
2017/05/23 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python虚拟环境模块venv使用及示例
2020/03/04 Python
利用python爬取有道词典的方法
2020/12/08 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
会计的岗位职责
2014/03/15 职场文书
校庆活动方案
2014/03/31 职场文书
校庆口号
2014/06/20 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
幼儿园感谢信
2015/01/21 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
大学生读书笔记大全
2015/07/01 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript