JavaScript中的子窗口與父窗口的互相調用問題
注意：要用open打開才行，如果用openModal打開則會訪問不到opener.
open的參數(shù)：
window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
參數(shù)說明
'page.html' 彈出窗口的文件名; 'newwindow' 彈出的新窗口的名字,非必須,可用空''代替;
height=100 高度; width=400 寬度; top=0 窗口距離屏幕上方的象素值; left=0 窗口距離屏幕左側的象素值;
toolbar=no 是否顯示工具欄，yes為顯示; menubar，scrollbars 表示菜單欄和滾動欄;
resizable=no 是否允許改變窗口大小,yes為允許; location=no 是否顯示地址欄,yes為允許;
status=no 是否顯示狀態(tài)欄內的信息（通常是文件已經打開）,yes為允許;
1、從子窗口中往父窗口傳值
如父頁面有一個控制的id是choosedProvider，那么這樣可以把值傳給父頁面：
opener.document.getElementById("choosedProvider").value="Tom";
2、從父窗口傳值給子窗口，如子窗口中有id為T的控件，此時可以用如下傳值：
<script>
var newWindow;
function openWindow(url){
newWindow = window.open(“new.htm”, "", "width=400,height=300 ");
}
function changeChild(){
newWindow.document.getElementById("T").value="我變了";
}
</script>
3、子窗口關閉并刷新父口，這里有兩種方式：
1) 子窗口關閉時關閉父窗口：
opener.location.reload(); window.close();
2) 父窗口去檢測，子窗口是否已經關閉了，在設定的一段時間之后自動刷新：
<script>
var newWindow;
var timer;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
timer = setInterval("updateAfterClose()", 1000);
}
function updateAfterClose() {
//父窗口去檢測子窗口是否關閉，然后通過自我刷新，而不是子窗口去刷新父窗口
if(newWindow.closed == true) {
clearInterval(timer);
self.location.reload(); // 主窗口刷新
return;
}
}
</script>
4、父窗口關閉的時候關閉子窗口。這個就是用方法去檢測父窗口的onunload事件：
<script>
var newWindow;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
}
function closeChild()
{
newWindow.close();
}
</script>
在body加上onunload事件：
<body onunload="closeChild()">
5、子窗口中關閉父窗口，這個功能可能相對要少用一點：
<script>
function closeParent()
{
opener.close();
}
</script>
<input type=button value="關閉父窗口" onclick=closeParent()>
以上所述是小編給大家介紹的JavaScript中的子窗口與父窗口的互相調用問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
JS實現(xiàn)禁止用戶使用Ctrl+鼠標滾輪縮放網頁的方法
這篇文章主要介紹了JS實現(xiàn)禁止用戶使用Ctrl+鼠標滾輪縮放網頁的方法,涉及javascript頁面元素與事件相關操作技巧,需要的朋友可以參考下2017-04-04
詳解javascript立即執(zhí)行函數(shù)表達式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達式IIFE的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
uni-app 項目中 “文件查找失敗：‘crypto-js‘“ 的問題及解決方法
在開發(fā)使用 uni-app 框架的項目時,遇到依賴問題是常見的,本文將介紹如何解決編譯過程中出現(xiàn)的 “文件查找失?。骸甤rypto-js’” 錯誤,并說明這種錯誤為什么會發(fā)生以及如何避免,下面分步驟給大家?guī)斫鉀Q方案,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了小程序綁定用戶方案優(yōu)化小結，該類小程序在使用之前就需要綁定用戶信息。常見于線下門店類功能性小程序。具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
打開一個小程序，我們會發(fā)現(xiàn)，一般構圖排版都是圖片banner - 快捷按鈕 - 產品/文章列表等詳細信息，底部導航一般是2~5個。這樣的排版是比較美觀的，那么為什么要這樣設計，這些輪播圖、快捷按鈕等小程序組件都有什么用呢？接下來就帶你詳細了解下2022-12-12
微信小程序網絡層封裝的實現(xiàn)（promise, 登錄鎖）
這篇文章主要介紹了微信小程序網絡層封裝（promise, 登錄鎖），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了微信小程序生成分享海報方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
實現(xiàn)JavaScript高性能的數(shù)據(jù)存儲
本文主要對JavaScript的數(shù)據(jù)存儲，產生性能問題的原因，內存泄露的幾種情況等做了簡要分析介紹，需要的朋友可以看下2016-12-12
這篇文章主要介紹了JavaScript中用字面量創(chuàng)建對象介紹,本文直接給出代碼實例,并講解了一些技巧,需要的朋友可以參考下2014-12-12
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？一時間不好回答，特別是undefined，因為這涉及到undefined的實現(xiàn)原理。2011-08-08