javascript操作iframe方法举例

发布时间:2019-07-27编辑:脚本学堂
本文介绍下,javascript脚本操作iframe的方法,有需要的朋友参考下。

本节内容:
javascript操作iframe

调用所有iframe的同一个JS方法:
应用场境:
一个页面里有多个iframe,每个iframe里都有一个doQuery方法。
调用每个iframe的doQuery方法:
 

复制代码 代码示例:
for(var i=0;i<window.frames.length;i++){
  window.frames[i].doQuery();
}

在iframe的JS代码中得到父页面的输入框的值:
 

复制代码 代码示例:
var num1= $(window.parent.document).find("#num1").val();

在父页面得到iframe输入框的值:
 

复制代码 代码示例:
dlg.getIFrame().document.getElementById("PROCESS_STATE").value;

html部分:
 

复制代码 代码示例:
<html>
<body>
<iframe id="ifr_1" name="ifr_1">
</iframe>
</body>
</html>

其中:
 

document.frames(“ifr_1”)可以得到一个window对象
document.frames[“ifr_1”]可以得到一个Html Element DOM对象

jquery取得iframe元素的方法:
 

复制代码 代码示例:
$(document.getElementById('iframeId').contentWindow.document.body).htm() 

显示iframe中body元素的内容。
 

复制代码 代码示例:
$("#testId", document.frames("iframename").document).html(); 

根据iframename取得其中ID为"testId"元素
 

复制代码 代码示例:
$(window.frames["iframeName"].document).find("#testId").html() 
 

作用同上

其它例子:
用jQuery在IFRAME中取得父窗口的某个元素的值,只好用DOM方法与jquery方法结合了。

1,在父窗口中操作 选中IFRAME中的所有单选钮
 

复制代码 代码示例:
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2,在IFRAME中操作 选中父窗口中的所有单选钮
 

复制代码 代码示例:
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的:<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

使用jquery操作iframe
1、内容里有两个ifame
 

复制代码 代码示例:
<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","http://www.jb200.com")

2、 如果内容里面有一个ID为mainiframe的ifame
 

复制代码 代码示例:
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>

得到someID的内容:
 

复制代码 代码示例:
$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值

3、在父窗口中操作 选中IFRAME中的所有单选钮
 

复制代码 代码示例:
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

选择id,使用find方法:
 

复制代码 代码示例:
$(window.frames["iframe1"].document).find("#id")