本节内容:
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")