快速获取/设置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 相关文章推荐
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
Redis构建分布式锁
2017/03/28 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
python获取外网IP并发邮件的实现方法
2017/10/01 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
英语复习计划
2015/01/19 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
业务员管理制度范本
2015/08/06 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
Nginx快速入门教程
2021/03/31 Servers
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js