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元素是一样的。

赞 (0)

相关推荐

  • html判断当前页面是否在iframe中的实例

    在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 if(self!=top){ parent.window.location.replace(window.location.href); } 以上这篇html判断当前页面是否在iframe中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • bgsound 背景音乐 的一些常用方法及特殊用法小结

    前几天,在QQ群里有个XD问到bgsound的一些资料,确切地说是它的特殊用法.奇怪群里的人竟然都没几个能说出新意的,包括我!或许是这个标签不常用.或者是用处不大,所以,大家也就没有特意去研究过背景音乐吧.(以前自学这个东西时,本人也是仅仅出于好奇,玩玩而已^_^) 废话少说,来点真格的-- (以下是原文,不仅仅是bgsound哦,还有其他东东,慢慢see) <BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多. <BGSOUND src="liberati

  • 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也同

  • js判断iframe中元素是否存在的实现代码

    本文章来给大家介绍js判断iframe中元素是否存在代码,有需要了解的朋友可进入参考. 一.纯原生态js实现方法,代码如下: <script> var bb = document.getElementById('PreviewArea').contentWindow.document.getElementById('aPic'); if( bb ) { } else { } //apic为子页面Preview.aspx里面元素的Id </script> <body> &

  • jQuery操作iframe中js函数的方法小结

    本文实例讲述了jQuery操作iframe中js函数的方法.分享给大家供大家参考,具体如下: 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content"].document).find("#trewuuu").html(); var thb = $("#core_content").contents().find("#trewuuu").html();

  • jQuery取得iframe中元素的常用方法详解

    本文实例分析了jQuery取得iframe中元素的常用方法.分享给大家供大家参考,具体如下: jquery取得iframe中元素的几种方法: 在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $('#objId', parent.document); 搞定... 在父页面 获取iframe子页面的元素: $("#objid",document.frames('iframename').document) $(document.getElementById('ifra

  • 从父页面读取和操作iframe中内容方法

    基本的操作方法: document.frames("frame_id").document.action; 其中,frame_id是该父页面需要进行操作的iframe的id,action是iframe中的相关操作. 从该方法中,可以看出 document.frames("frame_id")是用来从父页面中获取iframe的id的,而后面的document.action同一般的脚本对页面元素操作一样,具体举个例子来说明一下,其中父页面引用iframe部分如下: 复制

  • 解析Jquery取得iframe中元素的几种方法

    DOM方法:父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.documentjquery方法:在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

  • JS获取多维数组中相同键的值实现方法示例

    JS获取多维数组中相同键的值实现方法示例

    本文实例讲述了JS获取多维数组中相同键的值实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> <META NAME="Keywords" CONTENT=""> <META NAME

  • js改变Iframe中Src的方法

    本文实例讲述了js改变Iframe中Src的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="GENERATOR" content="Microsoft Visual Studio .N

  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

随机推荐