栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JS获取并操作iframe中元素的方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JS获取并操作iframe中元素的方法

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

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内部的窗口对象。

JS获取iframe文档内容

复制代码 代码如下:

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

一、需求与遇到的问题

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

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

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

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

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

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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/111814.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号