快速获取/设置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绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 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 VS ASP
2006/10/09 PHP
php实现的SESSION类
2014/12/02 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python实现梯度下降算法
2020/03/24 Python
详解python 爬取12306验证码
2019/05/10 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python实现3D地图可视化
2020/03/25 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
经管应届生求职信
2013/11/17 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
入党积极分子评语
2014/05/04 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
六五普法心得体会2016
2016/01/21 职场文书
深入理解python多线程编程
2021/04/18 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
python Tkinter模块使用方法详解
2022/04/07 Python