快速获取/设置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 选择和过滤方法代码总结
Nov 19 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 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获取网站域名和地址的代码
2008/08/17 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
python列表使用实现名字管理系统
2019/01/30 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL