jQuery控制IFRAME父窗口元素

時間 2019-11-10

標籤 jquery 控制 iframe 窗口元素欄目 JQuery 简体版

原文原文鏈接

DOM方法：javascript

父窗口操做IFRAME：window.frames["iframeSon"].documentcss

IFRAME操做父窗口: window.parent.documenthtml

jquery方法:java

在父窗口中操做選中IFRAME中的全部輸入框： $(window.frames["iframeSon"].document).find(」:text」);jquery

在IFRAME中操做選中父窗口中的全部輸入框：$(window.parent.document).find(」:text」);web

iframe框架的HTML：<iframe src=」test.html」 id=」iframeSon」 width=」700″ height=」300″ frameborder=」0″ scrolling=」auto」></iframe>框架

細心的朋友一下就能理解，原理其實很簡單，就是用到了$(DOM對象)轉換成jquery對象。dom

例子：測試

主頁面spa

<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>

子頁面：

//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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。