从父页面读取和操作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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 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函数
2006/10/09 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php数组编码转换示例详解
2014/03/11 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
原生js实现轮播图
2017/02/27 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
js实现扫雷源代码
2020/11/27 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
实例讲解python中的协程
2018/10/08 Python
python实现复制文件到指定目录
2019/10/16 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python celery原理及运行流程解析
2020/06/13 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
软件测试常见笔试题
2012/02/04 面试题
文员自我评价怎么写
2013/09/19 职场文书
部门年终奖分配方案
2014/05/07 职场文书
十佳家长事迹材料
2014/08/26 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
雷锋的观后感
2015/06/10 职场文书
房产遗嘱范本
2015/08/06 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS