快速获取/设置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 相关文章推荐
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
小程序点击图片实现png转jpg
Oct 22 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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php中apc缓存使用示例
2013/12/25 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
综合实践教学反思
2014/01/31 职场文书
出纳员的岗位职责
2014/02/22 职场文书
师范生求职信
2014/06/14 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年财政所工作总结
2014/11/22 职场文书
党员个人党性分析材料
2014/12/18 职场文书
民事答辩状格式范文
2015/05/21 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
公司年会开场白
2015/06/01 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Python实现智慧校园自动评教全新版
2021/06/18 Python