如何用JS获取iframe里面的内容

1、获取iframe

eg var ifr_window = windowframes["frameName"];

2、获取iframe中的元素

eg1 将iframe中id为elementId 的元素置为不显示：

var ifr_window = windowframes["frameName"];

ifr_windowelementIdstyledisplay = 'none';

eg2 获取iframe中id为listTable的表格

var oTable = windowframes["myFrame"]documentalllistTable;

3、隐藏或显示表格的某列

js函数：

function setHiddenOrShowCol(oTable, iCol, type) {

for (i = 0; i < oTablerowslength ; i++) {

oTablerows[i]cells[iCol]styledisplay = type;

}

}

调用举例，将id为listTable的表格元素的第4列置为不显示：

var oTable = windowframes["myFrame"]documentalllistTable;

setHiddenOrShowCol(oTable, 3, 'none');

调用举例2，将id为listTable的表格元素的第4列置为显示：

var oTable = documentframesmyFramedocumentalllistTable;

setHiddenOrShowCol(oTable, 3, 'block');

$("#父窗口元素ID",windowparentdocument);

对应javascript版本为windowparentdocumentgetElementByIdx_x("父窗口元素ID")；

取父窗口的元素方法：$(selector, windowparentdocument);

那么你取父窗口的父窗口的元素就可以用：$(selector, windowparentparentdocument);

类似的，取其它窗口的方法大同小异

$(selector, windowtopdocument);

$(selector, windowopenerdocument);

$(selector, windowtopframes[0]document);

CLASS：

$(windowparentdocument)find("className")text("123");

EX：

$(windowparentdocument)find("zzfw-box ul li[class='zzfw-insurance out']")text("123");

--------------------------------------------------------------------------------------------------

子窗口创建及父窗口与子窗口之间通信：

1、Javascriptd出子窗口

可以通过多种方式实现，下面介绍几种方法

(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象

其用法为：

windowopen(URL,windowName,parameters);

URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；

windowName:描述被打开的窗口的民称，可以使用'_top'、'_blank'等内建名称，这里的名称跟<a href="" target="">里的target属性是一样的。

parameters:描述被打开的窗口的参数值，或者说是样貌，其包括窗口的各个属性值，及要传入的参数值。

例如：

打开一个 400 x 100 的干净的窗口：

open('','_blank','width=400,height=100,menubar=no,toolbar=no,

location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也可以这样写： var newWindow = open('','_blank');

参数说明如下：

top=# 窗口顶部离开屏幕顶部的像素数

left=# 窗口左端离开屏幕左端的像素数

width=# 窗口的宽度

height=# 窗口的高度

menubar= 窗口有没有菜单，取值yes或no

toolbar= 窗口有没有工具条，取值yes或no

location= 窗口有没有地址栏，取值yes或no

directories= 窗口有没有连接区，取值yes或no

scrollbars= 窗口有没有滚动条，取值yes或no

status= 窗口有没有状态栏，取值yes或no

resizable= 窗口给不给调整大小，取值yes或no

(2) 在javascript中除了通过open()方法建立window对象实现d出窗口外，还可以通过建立对话框的方式d出窗口。

如：

alert(""); //d出信息提示对话框

confirm(""); //d出信息确认对话框

prompt(""); //具有交互性质的对话框

但是，上述实现的d出窗口具有的功能较为单一，只能完成较为简单的功能。对于需要在对话框中显示多个数据信息，

甚至是HTML控件就无能为力了。

(3) 使用模态对话框实现复杂的对话框需求

在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容，

也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能。

包括创建模态对话框和非模态对话框两种。

实现方法为：

//创建模态你对话框

windowshowModalDialog(sURL,vArguments,sFeatures)

//创建非模态对话框

windowshowModelessDialog(sURL,vArguments,sFeatures)

其区别在于：

用showModelessDialog()打开窗口时，不必用windowclose()去关闭它，当以非模态方式［IE5］打开时，打开对话框

的窗口仍可以进行其他的 *** 作，即对话框不总是最上面的焦点，当打开它的窗口URL改变时，它自动关闭。而模态［IE4］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。 showModeDialog()则不然。

参数说明：

sURL：必选参数，类型：字符串。

用来指定对话框要显示的文档的URL。

vArguments：可选参数，类型：变体。

用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过windowdialogArguments来取得传递进来的参数。

sFeatures：选参数，类型：字符串。

用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

dialogHeight：对话框高度

不小于100px，IE4中dialogHeight和dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

dialogWidth: 对话框宽度。

dialogLeft: 距离桌面左的距离。

dialogTop: 离桌面上的距离。

center: 窗口是否居中

默认yes，但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }。

help: 是否显示帮助按钮

默认yes，取值范围 {yes | no | 1 | 0 }。

resizable: 是否可被改变大小。

默认no，取值范围 {yes | no | 1 | 0 } ［IE5+］。

status: 是否显示状态栏。

默认为yes[ Modeless]或no[Modal]，

取值范围{yes | no | 1 | 0 } ［IE5+］。

scroll:指明对话框是否显示滚动条。

默认为yes，取值范围{ yes | no | 1 | 0 | on | off }。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。

dialogHide:在打印或者打印预览时对话框是否隐藏。

默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

edge:指明对话框的边框样式。

默认为raised，取值范围{ sunken | raised }。

unadorned:默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

传入参数：

要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象

例如：

var newWin=windowshowModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,

dialogWidth:300px, status:0, edge:sunken');

newWinopen();

与使用windowopen()方法创建窗口相比，模态方法创建窗口的区别在于有模态方法创建的窗口后将不能 *** 作父窗口

2、子窗口与父窗口间通信

(1) 使用windowopen()创建的窗口与父窗口通信

可以在子窗口页面中通过windowopener来获取父窗口对象，获取之后子窗口便可以对父窗口执行刷新，传值等 *** 作。

如：

windowopenerlocationreload(); //子窗口刷新父窗口

windowopenerlocationhref //获取父窗口href

windowopenerlocaitonpathname //获取父窗口路径名

//刷新父页面

windowlocationhref=windowlocationhref ; //重新定位父页面

windowlocationreload;

(2) 模态窗口与父窗口通信

通过使用showModelDialog(),及showModelessDialog（）方法创建的子窗口想与父窗口通信时，不能通过windowopener

来获取父窗口对象。要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象。

实现方式为：

在父窗口中：

var newWin=windowshowModelDialog(url,window,'');

newWinopen();

此时参数window即是父窗口对象

在子窗口中：

需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建

子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下

：

var parent=widnowdialogArguments；

变量parent便是父窗口对象。

例如：

//通过子窗口提交父窗口中的表单：form1,提交后执行查询 *** 作

var parent=windowdialogArguments;

parentdocumentform1action="QueryInforjsp";

parentsubmit();

//刷新父页面

var parent=windowdialogArguments;

parentlocationreload();

//从子窗口传值到父窗口

要实现在模态子窗口中传值到父窗口，需要使用windowreturnValue完成

实现方法如下：

在子窗口中：

//获取父窗口某字段值，对该值加一后返回父窗口

var parent=windowdialogArguments;

var x=parentdocuementgetElementById("age")value;

x=x+1；

//传回x值

windowreturnValue=x;

在父窗口中：

//获取来自子窗口的值

var newWin=windowshowModelDialog(url,window,'');

if(newWin!=null)

documentgetElementByIdx_x("age")value=newWin;

//在子窗口中设置父窗口的值

在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定，因为如果使用了不切实际的方法不仅降低开发效率，也降低了执行效率，往往也会造成不优雅的实现方式和代码风格。

子窗口设置父窗口的值使用方法如下：

子窗口中：

var parent=windowdialogArguments;

var x=parentdocumentgetElementByIdx_x("age")value;

x=x+1；

//设置父窗口中age属性值

parentdocumentgetElementByIdx_x("age")value=x;

以上是我在项目中使用javascript解决子窗口问题时，收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的（这主要与项目本身有关），不过其实不论是使用windowopen()还是使用windowshowModelDialog()进行传参等 *** 作时虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与父窗口之间的关系和角色之后，就很好理解了。

要解释这个问题，首先要解释两个技术点。

每个“窗口”都是一个JS Runtime，即JS的运行时。如果只有一个窗口，那么就只有一个Runtime；如果一个窗口下面还有一个iframe，那么就有两个Runtime；以此类推。

Runtime之间互 *** 作（或者通信）是有跨域限制的。也就是说，如果这个窗口本身是abaiducom域名下的页面，那么如果这个页面下还有一个iframe，这个iframe中加载的页面是bbaiducom域名下的。那么外层的JS。就不能跟这个iframe中的内容互 *** 作（或者通信）。

因此外层Runtime中的JS想 *** 作内层iframe中的内容，就必须要避免跨域限制。要么内层iframe加载页面的域名跟外层是一样的。要么就是需要在内层iframe加载的页面中执行documentdomain = 'baiducom';从而设置跟外层的主域相同。

例如，当前页面是abaiducom/testhtml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

<head>

</head>

<body>

<iframe id="iFrm1" src="

<script>

documentdomain = 'baiducom';

var ifrm1 = documentgetElementById('iFrm1');

ifrm1onload = function(){

alert(ifrm1contentWindowdocumentgetElementById('innerDiv')innerHTML);//d出恭喜你 *** 作到内部iframe中的元素了！！！

};

</script>

</body>

</html>

iframe中加载的页面内容如下：

1

2

3

4

5

6

7

8

9

10

<html>

<head>

</head>

<body>

<div id="innerDiv">恭喜你 *** 作到内部iframe中的元素了！！！</div>

<script>

documentdomain = 'baiducom';

</script>

</body>

</html>

在HTML5中新增了postMessage的API。可以方便窗口跟内部iframe之间进行通信，并且可以实现跨主域通信。但是有一些限制，1老版本的浏览器一般不支持。2父窗口只能向iframe中发送信息，iframe只能收消息，且父窗口不能直接 *** 作iframe中的内容。3父窗口发送的数据也是有限制的。只能发送基本数据类型或者plain object。

以上就是关于如何用JS获取iframe里面的内容全部的内容，包括:如何用JS获取iframe里面的内容、jquery，iframe父窗口怎么去拿子窗口的元素、如何获取iframe里面的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！