I want to trigger the window.onbeforeunload method while the user tries to refresh the browser and show a messsage to save his current work before leaving.
I am doing an angularjs application.
The below is my landing page url
http:localhost:9000/#/parentPage/
After button click user is navigated to
http:localhost:9000/#/parentPage/childPage1/:id
In childPage1Ctrl i defined the method for load
window.onbeforeunload = function(){
return "This is a message to remind you to save your experiment before leaving the page";
};
But when I launch the application the onbeforeunload method is being called.
How do i prevent this and bind the method to only that particular page?
How can i reload a particular childpage and access the id from the url?
Any help would be appreciated.
In your child contorller js destroy or Unregister the onbeforeunload event when the scope is out of this controller.
$scope.$on('$destroy', function() {
delete window.onbeforeunload;
});
Related
This question already has answers here:
Close a window opened with window.open() after clicking a button
(2 answers)
Closed last year.
I created an external window in the Angular application, everything works fine but I want to close the external window after application logout
written the code below, I'm moving from 1 page to another page then the external window closing properly. If I press the logout button then the external window does not close (ngOnDestroy is not called in the case of application logout)
ngAfterViewInit() {
this.externalWindow = window.open('', '', `width=${this.wWidth},height=${this.wHeight},left=${this.wLeft},top=${this.wTop}`)
this.host = new DomPortalOutlet(
this.externalWindow.document.body,
this.componentFactoryResolver,
this.applicationRef,
this.injector
)
this.host.attach(this.portal)
}
ngOnDestroy() {
this.externalWindow.close()
}
this.externalWindow.close()
is indeed the functionality you need to use. The problem is that you need to trigger it upon logout click as well. You can have something like
onClick="closeExternalWindow()"
of course, you need to implement closeExternalWindow which does the logout for externalWindow and then call this function both on destroy and logout click.
ngOnDestroy fires only when component destroys. In the logout use case, we are redirecting to the login URL which means it refreshes the page (This is outside angular workflow) hence ngOnDestroy not firing.
If I move 1 route to a different route within the application then ngOnDestroy fires and closes the external window.
This article helped me to find the solution
ngOnDestroy not firing on page reload
Solution:
ngOnInit() {
window.onbeforeunload = () => this.ngOnDestroy()
}
I have a requirement to show a prompt whenever our reservation page is navigated away from. When navigating within the app, there is no problem. A simple $onLocationChange works fine with a custom prompt. However when navigating to , for example, google or our logout page (which is in a separate angular app) the $onLocationChange does not work. In this case, I used:
window.onbeforeunload = onUnloadAppStart;
function onUnloadAppStart() {
var message = figureOutWhichMessageToUse();
return message;
}
this way I can at least customize the navigate message, even though I cant change the prompt box itself. However this causes a memory leak. So I need to set to null when I leave. Something like this:
$scope.$on("$destroy", function() {
window.onbeforeunload = null;
}
however this(the $destroy event) only seems to fire when I navigate within the app, same as the $onLocationChange. Furthermore I need to clean up binding AFTER the prompt, which is after the onUnloadAppStart function. This is because if I remove the binding and the user says "no, stay on this page", now my "onbeforeunload" is screwed up. Is there a way to fire functions after the onbeforeunload prompt?
Suppose I have 3 views (login, chat and Map) in an AngularJS application. If I'm in Map View and clicked on refresh button my page must get redirect to chat view after refreshing page. Experts please suggest how to implement.
very simple method I tried to implement.In test function I gave $rootScope.test=true; in chat view controller where as method called in Mapview. Whenever I reload my page value will get be undefined and and gave if condition with
if($rootScope.test==undefined)
{
$location.path('/chat');
}
you can implement you'r state navigation inside beforeunload browser event
var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
// your code for state navigation
event.preventDefault();
});
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
I have a single page application written in MVC4 that uses pjax() to push html into various s in my page. I have one sub-form that allows the user to edit the data and it if the user changes the data an isDirty flag gets set in javascript to trigger an alert at the bottom of the page that there are un-saved updates. I would also like to implement an additional warning when the user tries to leave the page without saving. If I use a traditional onbeforeunload function like this
window.onbeforeunload = function() {
if (isDirty) {
return 'You have unsaved changes!';
}
return null;
};
it calls the alert if I try to close the page or navigate away from the site entirely but if the user clicks on one of my links that re-populates the with some different information it does not trigger because you are not actually leaving the page. How can I architect it so that one of these pjax() links causes an alert similar to if I close the page?
You could subscribe to a global event that fires before a pjax request:
$(document).on('pjax:beforeSend', function() {
if (isDirty) {
return confirm('You have unsaved changes! Are you sure you want to continue?');
}
return true;
});
You could add a delegated event handler onto the links in the page. You just have to make sure the handler is bound to links that may load a "new page".