快速获取/设置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 相关文章推荐
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
vue之数据交互实例代码
Jun 20 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Mac下安装vue
Apr 11 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
vue调用语音播放的方法
Sep 27 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
手机端转换rem适应
2017/04/01 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Pandas中resample方法详解
2019/07/02 Python
简单了解python中的与或非运算
2019/09/18 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
2015年学校精神文明工作总结
2015/05/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js