This question already has answers here:
Is there a way to detect if a browser window is not currently active?
(24 answers)
Closed 3 years ago.
I have a scenario where bootstrap modal popup open logic is added to the master page of our application. The modal popup will be triggered when API call sends status message from API server. It works fine when the user has only one instance of application opened in single browser tab. But the problem occurs when user opens multiple browser tabs of different pages in the application. When the API calls sends the status message the Bootstrap modal popup is triggered across all the tabs which is an issue because the user doesn't want to see these popups in all the tabs.
I have tried the below jQuery onfocus, but this doesn't work. I believe I need to attach an eventlistener to the active browser tab but not sure how to proceed. Could someone please help me in how to find out the active browser tab and trigger the bootstrap popup only in the active tab.
$(window).focus(function(){
console.log('Trigger popup');
});
In your event handler you may use Page Visibility API:
if (!document.hidden) {
// do your stuff
}
Related
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
Try beforeunload event listner
window.addEventListener("beforeunload", function (e) {
//Log Out Call
}
But it will not work in all browsers.
Problem:
Google Chrome blocks ajax requests when print preview modal is opened on child window
Details:
I have a web page - ParentPage.html with a link to child page - PrintPage.html
a href="PrintPage.html" target="_blank"
Then on my PrintPage.html I have JavaScript that invoke window.print()
$(document).ready(function() {
window.print();
}
If user goes to ParentPage.html without closing that print modal on PrintPage.html and click some button that fires Ajax calls, they are blocked until the print modal is closed.
This should be a known problem with Google Chrome, other browsers(IE, Firefox) have similar issue but they don't become problem because they simply don't allow user to navigate to other tab other than the current opened print page.
I found related questions here on SO but no solution:
Chrome browser unable to make a server call when print preview is opened
Google Chrome blocks ajax requests when print preview is opened on child window
It would be best to make the parent window's Ajax not blocked. I feel it might be possible because not all tab's Ajax calls are blocked, only this parent window. So if there's a way to make the child page - PrintPage.html not a child page of ParentPage.html, that would work.
A less ideal way would be to close the print modal on PrintPage.html when I detect user clicking on ParentPage.html. Then reopen the print modal when PrintPage.html is focused. The reopen modal part is easy, but I don't know how to close print modal from a different tab.
If above two ways won't work, I think I'll have to display a warning when the print modal is opened and user is trying to click ajax call button at ParentPage.html. Detecting if the print modal is opened from ParentPage.html might not be easy either.
Any help would be appreciated!
This question already has answers here:
open url in new tab or reuse existing one whenever possible
(2 answers)
Closed 7 years ago.
I have strange functionality requirement. There are two websites which has link of each other. Clicking the link opens other website in a new tab.
However, when the other website is already open in a tab, all i want on button click is to refresh the existing tab instead of opening a new tab.
Is it possible implement this? And on all the browsers?
EDIT: This is different from other SO questions mentioned in the comments since user can open both the websites directly as well and in that case suggested answers doesn't work.
You can do it like this:
Click here
The first time you click that link the page will open in a new tab, but the next times it will refresh the same tab instead.
That's how WordPress refreshes the preview when writing posts.
Edit: This will only work if the other page is opened with this link.
This question already has answers here:
Detect browser or tab closing
(24 answers)
Closed 8 years ago.
How to set show alert when close browser or tab.
I tried use of javascript and jquery but my problem is not solved yet.
Please tell me if you have any script for only close browser or tab when open alert.
But not show alert in refresh page it iss display alert only close browser or tab.
Try
window.onbeforeunload = function() {
alert("!");
}
Note : But this will also show when you refresh your page, because when a page is refresh and unload the DOM, the onbeforeunload event will always be called.
This question already has answers here:
Javascript : Change the function of the browser's back button
(5 answers)
Closed 9 years ago.
Use Case :
I have a webpage which shows popovers for some of the functionalities. The popovers can be considered to be a HTML div which is shown when the corresponding button is clicked. And again go hidden when the cancel button is clicked / browser back button is clicked.
Problem :
Consider that the popover is shown. When the user clicks the back button, he should not get navigated back to the previous page instead only the popover div should get hidden.
How do I add this functionality using javascript to the browser back button?
Thanks in advance
It sounds like you're looking for the HTML5 History API.
A very good intro on how it works can be found at http://diveintohtml5.info/history.html .
Additional information can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html .
Also, you should look into polyfilling the feature for older browsers. There are plenty of options for doing so including https://github.com/browserstate/history.js , which includes some sample code and even a working demo (http://browserstate.github.io/history.js/demo/).
You can us hash which you append to the URL to fetch history changes.
index.html -> user opens popover -> index.html#popover
Now a click to the back button will redirect back to index.html. Of course this requires some amount of JavaScript code.
You cannot override the button actions in browsers for obvious security reasons, but you may add history entries programmatically, i.e. make the current page show twice in history, so that when the user click on the back button, he/she is redirected back to the same page. Use Really Simple History to achieve that.