整理關於html子頁面刷新父頁面的功能說明
1有兩個頁面parent.html和child.html，在parent頁面裡面通過window.open打開了child頁面，child頁面執行完代碼之後想要刷新parent頁面，然後立即查看到修改後的效果，那麼我們就要在child裡面直接能夠刷新parent頁面，這樣就可以實現這樣的效果。
1.1打開了parent.html頁面
1.2在parent頁面打開了child頁面
1.3child頁面點擊確定按鈕之後刷新了父頁面parent
2 parent.html內容：
<!DOCTYPE html>
<html>
<head>
<title>parents</title>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript">
function openWin() {
window.open('child.html', '_blank','width=500,height=400,top=200,left=400');
}
//定義callback方法，用於回調
function callback() {
refreshWin();
}
//刷新當前頁面
function refreshWin() {
//調用刷新頁面的方法，刷新當前頁面，結果會再次彈出222
window.location.reload();
}
//剛記載的時候彈出222
function show(){
alert(222);
}
</script>
</head>
<body onload="show()">
<input id="btnAdd" type="button" onclick="openWin();" value="添加" />
</body>
</html>
3 child.html內容：
<!DOCTYPE html>
<html>
<head>
<title>child</title>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript">
function formSubmit(){
window.opener.callback();//上述執行完成後，調用打開頁面的callback方法，此處是調用主頁面的callback方法
window.close();//當前頁面關閉
}
</script>
</head>
<body>
<input id="onSub" type="button" onclick="formSubmit();" value="確定">
</body>
</html>
4 通過這樣的操作很容易在子頁面操作父頁面所有的方法，感覺很方便，整理一下供大家參考。
歡迎關注我的頭條號，謝謝大家！
相關推薦
