快速获取/设置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 在线压缩和格式化收藏
Jan 16 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
layui 表格的属性的显示转换方法
2018/08/14 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
pytorch之添加BN的实现
2020/01/06 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python如何实时获取tcpdump输出
2020/09/16 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
什么时候用assert
2015/05/08 面试题
路政管理专业推荐信
2013/11/11 职场文书
党员创先争优活动总结
2014/05/04 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis