脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 获取并操作iframe中元素

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

 更新时间：2013年03月21日 14:05:25   投稿：shangke  
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文档内容

复制代码 代码如下:

<script type="text/javascript">
function getIframeContent(){  //获取iframe中文档内容
 var doc;
 if (document.all){ // IE
  doc = document.frames["MyIFrame"].document;
 }else{ // 标准
  doc = document.getElementById("MyIFrame").contentDocument;
 }

 return doc.body.innerHTML;
}
</script>

注意：上面的 .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元素是一样的。

您可能感兴趣的文章:

相关文章

  • JS中let的基本用法举例

    JS中let的基本用法举例

    ES6新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,下面这篇文章主要给大家介绍了关于JS中let的基本用法,需要的朋友可以参考下
    2023-01-01
  • 使用Javascript实现复制粘贴功能的示例代码

    使用Javascript实现复制粘贴功能的示例代码

    本篇文章记录如何通过js代码实现复制内容到剪切板,之后可以粘贴到需要的地方的功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • Javascript图像处理—虚拟边缘介绍及使用方法

    Javascript图像处理—虚拟边缘介绍及使用方法

    虚拟边缘就是按照一定映射关系，给图像添加边缘那么虚拟边缘有什么用呢？接下来详细介绍，需要了解的朋友可以参考下
    2012-12-12
  • 解决layui的form里的元素进行动态生成,验证失效的问题

    解决layui的form里的元素进行动态生成,验证失效的问题

    今天小编就为大家分享一篇解决layui的form里的元素进行动态生成,验证失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现倒计时补零功能

    微信小程序实现倒计时补零功能

    这篇文章主要为大家详细介绍了微信小程序实现倒计时补零功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • js 自带的 map() 方法全面了解

    js 自带的 map() 方法全面了解

    下面小编就为大家带来一篇js 自带的 map() 方法全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js中复制行和删除行的操作实例

    js中复制行和删除行的操作实例

    这篇文章介绍了复制行与删除行在JS中操作的实例，需要的朋友可以参考一下
    2013-06-06
  • js动态创建、删除表格示例代码

    js动态创建、删除表格示例代码

    生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号，具体的实现过程如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • Javascript字符串拼接小技巧(推荐)

    Javascript字符串拼接小技巧(推荐)

    下面小编就为大家带来一篇Javascript字符串拼接小技巧(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript实现多种排序算法

    JavaScript实现多种排序算法

    这篇文章主要介绍了JavaScript实现多种排序算法的相关资料，包括冒泡排序、插入排序、选择排序等，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论