how to call function on window close in angular 2 - javascript

oauthLogin(app) {
this.openAuthPopup(
'/assets/auth.html?socialApp=' + app, () => {
if (this.SharedService.getAuthorization()) {
this.checkRegistrationStatus();
this.SharedService.changeLoggedInStatus(true);
this.SharedService.changedisplayName(this.SharedService.getDispalyName());
this.router.navigate(['home/dashboard']);
}
}
);
}
my popup window opening code
openAuthPopup(url, callback) {
window.open(url, '_blank');
callback();
}
i have created this function and calling this function from html. This function is opening a popup tab. I want such that my if condition to be checked as my popup tab get closed, but currently what is happening is like my if condition is checked during the processes on popup tab.
I am stucked. Help needed.
thanks in advance

I think you need to listen to the event beforeunload with HostListener from Angular
#HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
// actions
}

Related

onbeforeunload event functioning

I have a requirement where when we close the tab or close the browser I need to perform some processes. When user will close the tab, there should be no popup getting displayed. I should be able to directly trigger the Leave button of the popup. The code which I am using sometimes work and sometimes not. Is it possible to close the tab or browser without popup or the popup is mandatory. Please advise. Below is my code :-
Without Popup(sometimes work and sometimes not)
window.onbeforeunload = function() {
//debugger;
perform();
};
//With this i get a popup which I don't want
window.addEventListener("beforeunload", function (e) {
perform();
(e || window.event).returnValue = null;
return null;
});

calling a popup window function from parent not working

I am creating a game in which players have pop window. I am trying to call timer function from parent to player2 popup
I have googled and put this code in parent
var Popup = window.open("player2.php", "bpPopup",'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=300,left = 490,top = 262');
Popup.focus();
Popup.calltimer();
and in player2.php
function calltimer() {
alert('timer 2 called');
}
Attach a load event to the popup and then call the function though the popups window object.
<script>
var Popup = window.open("./player2.php", "bpPopup", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=300,left = 490,top = 262');
Popup.focus();
Popup.addEventListener('load', function() {
Popup.window.calltimer();
}, false);
</script>
See it working (dont forget to allow popups)
The problem is a timing issue: window.open can return before the page has loaded, before even the player2 script has been parsed - so the function object doesn't exist yet.
Of course IE, and perhaps Edge, waits until after the child page has loaded before returning from window.open, so you can call child functions immediately. Adding a load event listener in IE actually won't work - load will have fired before you try to listen for it.
A workaround that doesn't care about timing in different browsers is to:
open the child window and record a reference to its window object.
in the child window, call a function in the opening window from the load event. This is a signal to the parent that the child is ready.
After receiving the signal from the child, the parent can proceed to call script in the child window.
Testing in the parent window:
var Popup;
function test1() {
Popup = window.open("player2.php", "bpPopup", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=300,left = 490,top = 262');
}
function player2Ready() {
setTimeout(test2,0);
}
function test2() {
Popup.focus();
Popup.calltimer();
}
where test1 is called from a click event:
<span onclick="test1()">test</span>
The player2Ready function uses a timeout to call test2 to decouple code execution between child and parent windows for the test.
In the child (player2)
function calltimer()
{
alert('timer 2 called');
}
window.onload = function() { opener.player2Ready()};

how to refresh parent from child window in php

I had opened a popup window from a modal now I need to refresh the page where my modal is by closing popup window or by a close button i had tried writing some codes i found here but not working some of my codes are
//this is not working
function closeAndRefresh(){
opener.location.reload();
window.close();
}
Call below function on onClose popup/onclick close button
function closeAndRefresh() {
location.reload();
}
function closeAndRefresh() {
window.top.location.reload();
}

Page exit via hyperlink not being catched by onberforeunload

I have an onberforeunload method which is correctly alerting the user when they are trying to close the tab or the browser using the follwoing code:
window.onbeforeunload = function(event) {
event.returnValue = 'Are you sure you want to leave/';
console.log(event.returnValue);
};
I have discovered that the onberforeunload is not being called when I click a hyperlink on the page. The warning message I want to display isn't appearing and the page is loading freely.
I have searched for many ways to create a popup for when a hyperlink has been selected but they all deal with one or groups of hyperlinks in div tags. I wish for a popup to display if any hyperlink is selected.
Why isn't onbeforeunload catching the exiting of the page through a hyperlink? Is my understanding of onbeforeunload wrong that it should be catching hyperlink exits?
UPDATE
I have updated the code to the following:
window.onbeforeunload = closeIT;
function closeIT() {
return 'here';
if(searchOnGoing){
return 'Ifs you leave the Youtube History page now the application will not finish';
}
};
It is still not working for hyperlinks and working for browser and tab closure. I am running this as part of a content script in a chrome extension which is injecting the content script into the page. Would this have an effect on it?
I also have an onunload following,i am wondering would this also have an effect on it?
window.onunload = function(event){
//Do something
}
Actually, it should trigger. Do you catch the event somehow via a click-event-listener? Anyway, you could show an alert with help of a click-event listener.
Following code-snippet is copied from a similar question: how to detect if a link was clicked when window.onbeforeunload is triggered?
Here the question was, in contrast, how to prevent the beforeunload event when links are clicked.
var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}
The following snippet correctly uses onbeforeunload.
<body onbeforeunload="return myFunction()">
Click me!
<script>
function myFunction() {
return "Please don't go!\nThis works beautifully!";
}
</script>

Refresh page with Javascript

I have a button on a page1 which opens a new page2 in the existing window. When page2 is closed i want page1 to be refreshed.
It should be said that page1 is not the parent of page2 even though the button is triggered from page1.
You can open the 2nd window using javascript and set an interval to see if it is closed. When it is closed you can then refresh your page.
// Code goes here
var childWindow;
var timer;
function openWindow() {
childWindow = window.open('http://google.com','','toolbar=0,status=0,width=626,height=436');
timer = setInterval(checkChild, 500);
}
function checkChild() {
if(childWindow && childWindow.closed) {
alert("Child window closed");
clearInterval(timer);
window.location.reload();
}
};
Try something like this, it should work
function buttonClick(url){
newWindow=window.open(url);
newWindow.onunload=function{ window.location.reload();};
}
Note: onunload event works only in IE and Firefox

Categories