快速获取/设置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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
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函数
2006/10/09 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
Python实现身份证号码解析
2015/09/01 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python目录与文件名操作例子
2016/08/28 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python机器学习之神经网络(一)
2017/12/20 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python用什么编辑器进行项目开发
2020/06/17 Python
房地产销售计划书
2014/01/10 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
政风行风整改报告
2014/11/06 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
python利用while求100内的整数和方式
2021/11/07 Python