Vue/Angular中父窗口新開的子窗口關閉的時候刷新父窗口

最近遇到一個項目需求:Angular中父窗口新開的子窗口提交完信息關閉的時候刷新父窗口。

知識點:

window.opener

概述

返回打開當前窗口的那個窗口的引用,例如:在window A中打開了window B,B.opener 返回?A.

語法

var objRef = window.opener;

例子

 if (window.opener != indexWin) {referToTop(window.opener);}

備注

如果當前窗口是由另一個窗口打開的,?window.opener保留了那個窗口的引用. 如果當前窗口不是由其他窗口打開的, 則該屬性返回 null.

Can I use

?新創建的window對象有一個opener屬性,其中保存著打開它的原始窗口對象。這個屬性只在彈出窗口中的最外層window對象(top)中有定義,而且指向調用window.open()的窗口或框架。表示新window需要跟另一個標簽通信。opener設置為null,表示新打開的標簽頁可以運行在獨立的進程中。

自己寫的測試demo能實現

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{ message }}<button type="button" @click="closeThisWindow">close</button><button type="button" @click="openSonWindow">open</button></div><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},mounted() {// 將backToday方法綁定到window下面,提供給外部調用window['backToday'] = () => {this.goToday()}// 注冊監聽window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))},destroyed() {// 非窗口關閉的跳轉直接卸掉監聽window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))},methods: {// 父窗口關閉方法beforeunloadHandler(e) {// 關閉父窗口window.opener && window.opener.location.reload()// 也可以只調用父窗口方法刷新數據(需要在父窗口中手動為window創建一個調用方法的方法)// window.opener && window.opener.backToday()},closeThisWindow() {// 第二種方式直接就是好window.opener.location.reload();window.close();},openSonWindow() {this.message = 'new parent'window.open('/test/src/index2.html')},goToday() {this.message = 'new parent refreash'}}})</script></body>
</html>

簡單直接點

window.opener.location.reload();
window.close();

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247254.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247254.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247254.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

圖像邊緣特征

圖像邊緣是圖像的重要特征&#xff0c;是圖像中特性&#xff08;如像素灰度、紋理等&#xff09;分布的不連續處&#xff0c;圖像周圍特性有階躍變化或屋脊狀變化的那些像素集合。圖像的邊緣部分集中了圖像的大部分信息&#xff0c;一幅圖像的邊緣結構與特點往往是決定圖像特質…

HDU 6631 line symmetric(枚舉)

首先能想到的是至少有一對相鄰點或者中間間隔一個點的點對滿足軸對稱&#xff0c;那么接下來只需要枚舉剩下的點對是否滿足至多移動一個點可以滿足要求。 第一種情況&#xff0c;對于所有點對都滿足要求&#xff0c;那么Yes。 第二種情況&#xff0c;有一個點不滿足要求&#x…

學習數字圖像處理經驗談

一、面向應用&#xff1a;層層分解、抓住要點 我們學習數字圖像處理的最終目的還是應用&#xff0c;不管是用它來研制產品還是研發項目抑或是研究課題&#xff0c;都要用數字圖像處理的理論、方法和技術來解決實際問題。在此過程中&#xff0c;提高效率是非常重要的&#xff0c…

讀javascript百煉成仙笑死筆記一

“自然是這樣的&#xff0c;但是我現在這樣改一下&#xff0c;你說結果是多少呢&#xff1f;”葉小凡詭異地笑了笑&#xff0c;然后打出一段比較奇特的代碼。 var a 1; var b; var sum (b a --a) a-- b; “噗&#xff01;”看到這段代碼&#xff0c;對面弟子差點一口老血…

C#調用存儲過程的通用類

usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Data.SqlClient;usingSystem.Collections;usingSystem.Data;//摘要&#xff1a;數據訪問助手。//作者&#xff1a;ZhiQiao//日期&#xff1a;2008/07/02namespaceZhiQiao.DataAccessHelper{ //存…

圖靈獎得主(一)

本文轉自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A A.M. Turing Award ACMs most prestigious technical award is accompanied by a prize of $25,000. It is given to an individual selected fo…

react-router-dom@6獲取路由傳參

目錄 參數獲取 1、子路由形式攜帶 2、問號(?)形式參數 3、事件跳轉傳參 router/index.tsx import App from "App"; import Home from "pages/Home"; import List from "pages/List"; import Detail from "pages/Detail"; import…

圖靈獎得主(二)

本文轉自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1987年度的圖靈獎授予了IBM沃特森研究中心老資格的研究員 約翰科克(Johncocke)。 科克是從機械到數學、又從數學轉到 計算機方向上來的學者。…

jQuery效果之滑動

jQuery 滑動方法有三種&#xff1a;slideDown()、slideUp()、slideToggle()。 jQuery slideDown() 方法用于向下滑動元素&#xff0c; 語法&#xff1a;$(selector).slideDown(speed,callback); 可選的 speed 參數規定效果的時長。它可以取以下值&#xff1a;"slow"、…

Error: This command has to be run with superuser privileges (under the root user on most systems).

意思是錯誤&#xff1a;此命令必須以超級用戶權限&#xff08;在大多數系統上以root用戶權限&#xff09;運行。所以當前的用戶是普通用戶&#xff0c;需要切換為超級用戶&#xff08;root用戶&#xff09;先輸入在命令行中輸入 su root 然后會出現Password&#xff1a;&#…

圖靈獎得主(三)

本文轉自&#xff1a;本文轉自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 繼1979年度圖靈獎首次授予一位加拿大學者K.E.Iverson之后&#xff0c; 1989年度的圖靈 獎又一次授予加拿大學者威廉凱亨(Willia…

對微信公共號的理解

通過redirect_uri獲取code 通過code和appid 獲取access_token 進行鑒權 轉載于:https://www.cnblogs.com/zhouyideboke/p/11309752.html

vue3 v-model變化

概覽 就變化內容而言&#xff0c;此部分屬于高階內容&#xff1a; 非兼容&#xff1a;用于自定義組件時&#xff0c;v-model的 prop 和事件默認名稱已更改&#xff1a; prop&#xff1a;value -> modelValue&#xff1b;event&#xff1a;input -> update:modelValue&a…

圖靈獎得主(四)

本文轉自&#xff1a;本文轉自&#xff1a;本文轉自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1991年度的圖靈獎授予了愛丁堡大學計算機科學系教授羅 賓米爾納(Robin Milner)。米爾納是繼M.V.Wilkes(1…

sql 日期類型空值等于 1900-01-01

SQL server 中查詢&#xff1a;select cast( as datetime) 結果&#xff1a;1900-01-01 00:00:00.000 做為判斷條件的話&#xff0c;要注意。不能直接 轉載于:https://www.cnblogs.com/meng9527/p/11311765.html

koa洋蔥模型

Koa 和 Express 都會使用到中間件 Express的中間件是順序執行&#xff0c;從第一個中間件執行到最后一個中間件&#xff0c;發出響應如上圖 Koa是從第一個中間件開始執行&#xff0c;遇到 next 進入下一個中間件&#xff0c;一直執行到最后一個中間件&#xff0c;在逆序&#x…

圖靈獎得主(五)

[1993]斯坦恩斯--"打工"帶來的機遇 斯坦恩斯是學數學出身的。1958年他在卡爾頓學院(Carlton College)取 得數學學士學位后進入普林斯頓大學研究生院&#xff0c;用了3年時間就 取得博士學位&#xff0c;其博士論文課題是關于博奕論的。 斯坦恩斯跨進計算機科…

koa后端允許跨域

舉個例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width…

python面向對象之繼承

面向對象之繼承 什么是面向對象的繼承&#xff1f; 繼承&#xff08;英語&#xff1a;inheritance&#xff09;是面向對象軟件技術當中的一個概念。如果一個類別A“繼承自”另一個類別B&#xff0c;就把這個A稱 為“B的子類別”&#xff0c;而把B稱為“A的父類別”也可以稱“B是…

美國正面臨“人才泡沫”破裂危機?

&#xff08;Jason Lane和Kevin Kinser/文&#xff09;最近&#xff0c;與教育有關的種種問題在美國社會引起了廣泛討論。首先巨額的學生貸款問題&#xff1a;根據美聯儲紐約分行在2012年11月發布的一份報告&#xff0c;全美學生貸款總額已經達到420億美元&#xff0c;其中新增…