快速获取/设置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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
js实现微信分享代码
2020/10/11 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
详解Python3的TFTP文件传输
2018/06/26 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
礼貌问候语大全
2015/11/10 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis