快速获取/设置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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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保存和输出文件
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python中time库的实例使用方法
2019/10/31 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
2019史上最全Database工程师题库
2015/12/06 面试题
三好学生评语大全
2014/12/29 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis