jQuery控制IFRAME父窗口元素


DOM方法:

父窗口操作IFRAME:window.frames["iframeSon"].document

IFRAME操作父窗口: window.parent.document

jquery方法:

在父窗口中操作 选中IFRAME中的所有输入框:

$(window.frames["iframeSon"].document).find(”:text”);

在IFRAME中操作 选中父窗口中的所有输入框:

$(window.parent.document).find(”:text”);

iframe框架的HTML:

<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>

细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成jquery对象。

例子:

主页面

<title>主页面</title>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showSubValue(){
//var v = window.frames[0].document.getElementById("subdiv1").innerHTML;
//alert(v);

var o = $(window.frames[0].document).find(":div#subdiv1");
alert(o.html());
}
</script>
</head>

<body>
<div id="mainDiv">主页面测试数据</div>
<input type="button" value="查看子页面数据" onclick="showSubValue();"/>
<iframe src="sub.html" width="300" height="300"></iframe>
</body> 
</html>

子页面:

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<title>子页面</title>
<script type="text/javascript">
function showMainValue(){

//dom方式
//var v = window.parent.document.getElementById("mainDiv").innerHTML;
//alert(v);

//window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";


//jquery方式
var o = $(window.parent.document).find(":div#mainDiv");
alert(o.html());
}
</script>
</head>

<body>
<div id="subdiv1">子页面测试数据</div>
<input type="button" value="显示父页面数据" onclick="showMainValue();"/>
</body>
</html>

http://my.oschina.net/heguangdong/blog/14988

Archives