【javascript】iframe父子兄弟之間呼叫傳值(contentWindow && parent) (推薦)
iframe的呼叫包括以下幾個方面：（呼叫包含html dom，js全域性變數，js方法）
主頁面呼叫iframe；
iframe頁面呼叫主頁面；
主頁面的包含的iframe之間相互呼叫；
主要知識點
1：document.getElementById("ii").contentWindow 得到iframe物件後，就可以通過contentWindow得到iframe包含頁面的window物件，然後就可以正常訪問頁面元素了；
2：$("#ii")[0].contentWindow 如果用jquery選擇器獲得iframe，需要加一個【0】；
3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window物件後接著使用jquery選擇器進行頁面操作;
4：$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通過這種方式向iframe頁面傳遞引數，在iframe頁面window.hellobaby就可以獲取到值，hellobaby是自定義的變數；
5：在iframe頁面通過parent可以獲得主頁面的window，接著就可以正常訪問父親頁面的元素了；
6：parent.$("#ii")[0].contentWindow.ff; 同級iframe頁面之間呼叫，需要先得到父親的window，然後呼叫同級的iframe得到window進行操作；
main.html ? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>顯示圖表</title> <script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var gg="dsafdsafdsafdsafsdaf"; function ggMM() { alert("2222222222222222222222222222222"); } function callIframeMethod() { //document.getElementById("ii").contentWindow.test(); $("#ii")[0].contentWindow.test(); //用jquery呼叫需要加一個[0] } function callIframeField() { alert($("#ii")[0].contentWindow.ff); } function callIframeHtml() { alert($("#ii")[0].contentWindow.$("#dd").val()); //alert($("#ii")[0].contentWindow.document.getElementById("dd").value); //alert($("#ii")[0].contentWindow.document.getElementById("dd").value); } function giveParameter() { $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; } </script> </head> <body> <a href="#" onClick="giveParameter();">引數傳遞</a> <a href="#" onClick="callIframeMethod();">呼叫子iframe方法</a> <a href="#" onClick="callIframeField();">呼叫子iframe變數</a> <a href="#" onClick="callIframeHtml();">呼叫子iframe元件</a></br> <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe> <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe> </body> </html>
frame.html
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>顯示圖表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var ff="adfdasfdsafdsafdsaf";
function test() {
alert($("#dd").val());
}
function callMainField() {
alert(parent.gg);
}
function callMainMethod() {
parent.ggMM();
}
function callMainHtml() {
alert(parent.$("#ii").attr("id"));
}
function getParameter() {
alert(window.hellobaby);
}
</script>
</head>
<body>
<a href="#" onClick="getParameter();">接受引數</a>
<a href="#" onClick="callMainMethod();">呼叫子iframe方法</a>
<a href="#" onClick="callMainField();">呼叫主視窗變數</a>
<a href="#" onClick="callMainHtml();">呼叫子iframe元件</a>
<input id="dd" type="text" value="1111111111"/>
</body>
</html>newFrame.html
兄弟iframe頁面 newIframe.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>顯示圖表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
var ff=parent.$("#ii")[0].contentWindow.ff;
alert(ff);
}
</script>
</head>
<body>
<a href="#" onClick="callLevelFrame();">呼叫兄弟iframe</a>
<input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>兄弟iframe頁面 newIframe.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>顯示圖表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
var ff=parent.$("#ii")[0].contentWindow.ff;
alert(ff);
}
</script>
</head>
<body>
<a href="#" onClick="callLevelFrame();">呼叫兄弟iframe</a>
<input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>opener
opener用於在window.open的頁面引用執行該window.open方法的的頁面的物件。例如：A頁面通過window.open()方法彈出了B頁面，在B頁面中就可以通過opener來引用A頁面，這樣就可以通過這個物件來對A頁面進行操作
parent
parent用於在iframe,frame中生成的子頁面中訪問父頁面的物件。例如：A頁面中有一個iframe或frame，那麼iframe或frame中的頁面就可以通過parent物件來引用A頁面中的物件。這樣就可以獲取或返回值到A頁面中。
parent指父視窗，在FRAMESET中，FRAME的PARENT就是FRAMESET視窗。 opener指用WINDOW.OPEN等方式建立的新視窗對應的原視窗。 兩者肯定不一樣。
parent是相對於框架來說父視窗物件 opener是針對於用window.open開啟的視窗來說的父視窗，前提是window.open開啟的才有