快速获取/设置iframe内对象元素的几种js实现方法


Posted in Javascript onMay 20, 2016

1、IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID');

2、IE专用(通过IFRAME名称形象定位): document.frames['iframe的name'].document.getElementById('元素的ID');

以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

3、通用方法: document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表FRAME和IFRAME内部的窗口对象。

但是,很明显,这种写法非常要命,太长了。如果要操作一系列里面的元素,这样写起来,实在够受的,就算用复制粘贴大法,眼睛看起来也是个问题。

4、通用方法的简写:

对document.getElementById定义一个短名称,稍微熟悉JS的朋友都知道这个方法。在这里它可以发挥双倍的作用,如下例:

var $id=document.getElementById;
$Id('iframe的ID').contentWindow.$Id('元素的ID') //这样就得到了要取的对象

在这一点上,我还是喜欢IE的做法,比较呵护。因为微软不是一个单独的浏览器开发商,它本身也要大量地编写开发HTML/ASP等文档,所以比较能够做到这一点。而其它的浏览器开发商,基本只是站在一个浏览器的立场,把最基本的链路走通就完事了,很少站在开发者立场去设计出一些类似这样既简便又不失语义化的捷径来。很多人动辄说它们“标准”,在有些地方固然有理,但在有些地方,这种标准也不过是一种冷漠。

以上这篇快速获取/设置iframe内对象元素的几种js实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
BootStrap3学习笔记(一)之网格系统
May 20 #Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 #Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 #Javascript
You might like
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
php实现的顺序线性表示例
2019/05/04 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python中统计函数运行耗时的方法
2015/05/05 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python读取各种文件数据方法解析
2018/12/29 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
施工安全责任书
2014/04/14 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
MYSQL常用函数介绍
2022/05/05 MySQL
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技