js中opener與parent的區(qū)別詳細(xì)解析
opener即誰(shuí)打開(kāi)我的，比如A頁(yè)面利用window.open彈出了B頁(yè)面窗口，那么A頁(yè)面所在窗口就是B頁(yè)面的opener，在B頁(yè)面通過(guò)opener對(duì)象可以訪問(wèn)A頁(yè)面。
parent表示父窗口，比如一個(gè)A頁(yè)面利用iframe或frame調(diào)用B頁(yè)面，那么A頁(yè)面所在窗口就是B頁(yè)面的parent。在JS中，window.opener只是對(duì)彈出窗口的母窗口的一個(gè)引用。比如：a.html中，通過(guò)點(diǎn)擊按鈕等方式window.open出一個(gè)新的窗口b.html。那么在b.html中，就可以通過(guò)window.opener（省略寫(xiě)為opener）來(lái)引用a.html，包括a.html的document等對(duì)象，操作a.html的內(nèi)容。
假如這個(gè)引用失敗，那么將返回null。所以在調(diào)用opener的對(duì)象前，要先判斷對(duì)象是否為null，否則會(huì)出現(xiàn)“對(duì)象為空或者不存在”的JS錯(cuò)誤。
示例：
aa.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<span id="name"></span>
<input type="button" " value="彈窗" onclick="window.open('bb.html')" />
</body>
</html
bb.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<input type="text" id="inputValue"/>
<input type="button" value="添加" onclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
</body>
</html>
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)窗口的引用，比如點(diǎn)擊了aa.htm上的一個(gè)鏈接而打開(kāi)了bb.htm，然后我們打算在bb.htm上輸入一個(gè)值然后賦予aa.htm上的一個(gè)id為“name”的textbox中，就可以
寫(xiě)為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)";
window.opener.document.getElementById("name").innerHTML= "輸入的數(shù)據(jù)";
相關(guān)文章
BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)
這篇文章主要介紹了BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了javascript iframe跨域詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕獲取頁(yè)面高度的方法,涉及JavaScript針對(duì)頁(yè)面元素高度的各種常見(jiàn)運(yùn)算,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)?lái)一篇淺談JS之iframe中的窗口。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果
這篇文章主要介紹了js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果,涉及JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
css transform 3D幻燈片特效實(shí)現(xiàn)步驟解讀
3D幻燈片特效想必大家以不在陌生至于表現(xiàn)形式一般都是拘泥于傳統(tǒng)接下來(lái)為大家介紹下使用css3 transform配合js以及html實(shí)現(xiàn)3D幻燈片特效2013-03-03
D3是目前最流行的JavaScript可視化圖表庫(kù)之一，D3的圖表類(lèi)型非常豐富，并且支持SVG格式，因此應(yīng)用十分廣泛，也有很多圖表插件基于D3開(kāi)發(fā)，比如MetricsGraphics.js，在D3上構(gòu)建的數(shù)據(jù)圖表非常強(qiáng)大。2017-08-08
H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑指南
這篇文章主要給大家介紹了關(guān)于H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺(tái)的編程語(yǔ)言。這篇文章主要介紹了TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-04-04
JavaScript高階教程之“==”隱藏下的類(lèi)型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于JavaScript高階教程之“==”隱藏下類(lèi)型轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04