今天做一個(gè)后臺(tái)模版的時(shí)候内边，彈出框關(guān)閉之后，需要刷新頁(yè)面待锈！
在主頁(yè)面中包含IFrame漠其，多的不愛(ài)說(shuō)了！就先這樣吧８鸵簟：褪骸！
感覺(jué)沒(méi)有意思春瞬！
contentWindow && parent
iframe的調(diào)用包括以下幾個(gè)方面：（調(diào)用包含html dom柴信，js全局變量，js方法）
- 主頁(yè)面調(diào)用iframe宽气；
- iframe頁(yè)面調(diào)用主頁(yè)面随常；
- 主頁(yè)面的包含的iframe之間相互調(diào)用；
主要知識(shí)點(diǎn)
- document.getElementById("hanpang").contentWindow 得到iframe對(duì)象后萄涯，就可以通過(guò)contentWindow得到iframe包含頁(yè)面的window對(duì)象绪氛，然后就可以正常訪問(wèn)頁(yè)面元素了；
- $("#hanpang")[0].contentWindow 如果用jquery選擇器獲得iframe涝影，需要加一個(gè)【0】枣察；
- $("#hanpang")[0].contentWindow.$("#name").val() 可以在得到iframe的window對(duì)象后接著使用jquery選擇器進(jìn)行頁(yè)面操作;
- $("#hanpang")[0].contentWindow.myValue="我是胖先森"; 可以通過(guò)這種方式向iframe頁(yè)面?zhèn)鬟f參數(shù)，在iframe頁(yè)面window.myValue就可以獲取到值，myValue是自定義的變量序目；
- 在iframe頁(yè)面通過(guò)parent可以獲得主頁(yè)面的window臂痕，接著就可以正常訪問(wèn)父親頁(yè)面的元素了；
- parent.$("#hanpang")[0].contentWindow.message; 同級(jí)iframe頁(yè)面之間調(diào)用宛琅，需要先得到父親的window刻蟹，然后調(diào)用同級(jí)的iframe得到window進(jìn)行操作逗旁；
源碼
源碼包含內(nèi)容嘿辟，主頁(yè)面（main.html）中含有兩個(gè)iframe子頁(yè)面(frame.html,newIframe.html)
- 主頁(yè)面如何調(diào)用子頁(yè)面中的方法；
- 子頁(yè)面如何調(diào)用主頁(yè)面中的方法片效；
- 兩個(gè)子iframe之間如何如何進(jìn)行交互
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IFrame的數(shù)據(jù)傳遞</title>
</head>
<body>
<p>
<a href="javascript:void(0)" onClick="sendParameter();">參數(shù)傳遞</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeMethod();">調(diào)用子iframe方法</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeField();">調(diào)用子iframe變量</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeHtml();">調(diào)用子iframe組件</a></br>
</p>
<iframe id="hanpang" src="myFrame.html" width="100%" frameborder="1"></iframe>
<iframe id="new" src="newFrame.html" width="100%" frameborder="1"></iframe>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
var parentVal = "我是父頁(yè)面定義的變量";
function sendParameter(){
//myValue 是傳遞的變量
$("#hanpang")[0].contentWindow.myValue="我是胖先森";
}
function callIframeMethod() {
//document.getElementById("hanpang").contentWindow.myTest();
$("#hanpang")[0].contentWindow.myTest(); //用jquery調(diào)用需要加一個(gè)[0]
}
function callIframeField() {
alert($("#hanpang")[0].contentWindow.message);
}
function callIframeHtml() {
// #name 是 myFrame頁(yè)面中控件ID
alert($("#hanpang")[0].contentWindow.$("#name").val());
//alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
//alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
}
function say() {
alert("我是main.html提供的方法");
}
</script>
</body>
</html>
myFrame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子頁(yè)面</title>
</head>
<body>
<a href="javascript:;" onclick="getParamter()">接受參數(shù)</a>
<a href="javascript:;" onClick="callMainMethod();">調(diào)用主窗口方法</a>
<a href="javascript:;" onClick="callMainField();">調(diào)用主窗口變量</a>
<a href="javascript:;" onClick="callMainHtml();">調(diào)用主窗口組件</a>
<input id="name" type="text" value="我要學(xué)習(xí)"/>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
var message = "消息：打賞昂炻住！";
function getParamter() {
alert(window.myValue);
}
function callMainMethod() {
parent.say();
}
function callMainField() {
alert(parent.parentVal);
}
function callMainHtml() {
alert(parent.$("#hanpang").attr("id"));
}
function myTest() {
alert($("#name").val());
}
</script>
</body>
</html>
newFrame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="javascript:;" onClick="callLevelFrame();">調(diào)用兄弟iframe</a>
<input id="new_iframe" type="text" value="我的新值"/>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
function callLevelFrame() {
var message=parent.$("#hanpang")[0].contentWindow.message;
alert(message);
}
</script>
</body>
</html>
