从父页面读取和操作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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
js实现多图左右切换功能
Aug 04 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 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
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
微信小程序日历效果
2018/12/29 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
python搭建微信公众平台
2016/02/09 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python线程池threadpool使用篇
2018/04/27 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
恐龙的灭绝教学反思
2014/02/12 职场文书
2015中学学校工作总结
2015/07/20 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript