快速获取

2020-01-06 作者:亚洲城动态   |   浏览(74)

1、IE专用: document.frames[i].document.getElementById;

JS获取/设置iframe内对象元素、文档的几种方法

2、IE专用: document.frames['iframe的name'].document.getElementById;

复制代码 代码如下:document.frames[i].document.getElementById;

以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

复制代码 代码如下:document.frames['iframe的name'].document.getElementById;

3、通用方法: document.getElementById.contentWindow.document.getElementById

以上方法,不仅对iframe适用,对frameset里的frame也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表FRAME和IFRAME内部的窗口对象。

复制代码 代码如下:document.getElementById.contentWindow.document.getElementById

但是,很明显,这种写法非常要命,太长了。如果要操作一系列里面的元素,这样写起来,实在够受的,就算用复制粘贴大法,眼睛看起来也是个问题。

注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表frame和iframe内部的窗口对象。

4、通用方法的简写:

JS获取iframe文档内容

对document.getElementById定义一个短名称,稍微熟悉JS的朋友都知道这个方法。在这里它可以发挥双倍的作用,如下例:

复制代码 代码如下:

var $id=document.getElementById;$Id.contentWindow.$Id //这样就得到了要取的对象

注意:上面的 .contentDocument 相当于 .contentWindow.document !

在这一点上,我还是喜欢IE的做法,比较呵护。因为微软不是一个单独的浏览器开发商,它本身也要大量地编写开发HTML/ASP等文档,所以比较能够做到这一点。而其它的浏览器开发商,基本只是站在一个浏览器的立场,把最基本的链路走通就完事了,很少站在开发者立场去设计出一些类似这样既简便又不失语义化的捷径来。很多人动辄说它们“标准”,在有些地方固然有理,但在有些地方,这种标准也不过是一种冷漠。

在网站的后台管理中使用了iframe框架布局,包括顶部菜单、左侧导航和主页面。需求是:点击主页面上的一个按钮,在顶部菜单栏的右侧显示“退出”链接,点击可退出系统。

以上这篇快速获取/设置iframe内对象元素的几种js实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

我的思路是:在顶部的菜单页面放一个不可见的“退出”链接,当用户点击位于iframe中的主页面中的按钮时,在顶部菜单页面的右侧显示“退出”。

我现在遇到的问题是:如何在页面的一个iframe子页面中获取并且操作其它iframe子页面中的HTML元素?

二、通过JS获取并操作iframe中的元素来解决问题

这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口,如果文档包含框架,浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

经过我在网上查资料,找到了JS操作iframe中HTML元素的方法。示例如下。复制代码 代码如下: function ShowExit() { //获取iframe的window对象 var topWin = window.top.document.getElementById.contentWindow; //通过获取到的window对象操作HTML元素,这和普通页面一样 topWin.document.getElementById.style.visibility = "visible"; }

说明:第一步,通过window.top.document.getElementById方法获取了顶部菜单页面所在的iframe对象;第二步,通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象;第三步,通过上一步获取到的window对象来操作iframe框架中的元素,这和操作不在iframe框架中的普通HTML元素是一样的。

本文由yzc216亚洲城发布于亚洲城动态,转载请注明出处:快速获取

关键词: 亚洲城官网 yzc216亚洲城