快速获取/设置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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
JS异步宏队列微队列原理详解
Sep 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脚本中include文件出错解决方法
2008/11/20 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
python删除文件示例分享
2014/01/28 Python
初步理解Python进程的信号通讯
2015/04/09 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python中元组,列表,字典的区别
2017/05/21 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
办护照工作证明范本
2014/01/14 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
刑事上诉状范文
2015/05/22 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书