Callback for jQuery window.focus doesn't trigger after some time - javascript

I'm facing this weird issue in Chrome. This is the simple code I tried (in my web application):
jQuery(window).focus(function() {
console.log("Window is now active");
});
This works fine for some time.
SCENARIO
I opened 2 tabs with different links (Say gmail, stackoverflow, etc). Then I opened my web application's home page in 1 tab and opened some other page of same application in another tab (Total 4 tabs).
Now, when I switched between my application's tabs, it showed me the logger for some time. But, when I clicked other tab(say stackoverflow tab) and returned to my web app tab, then loggers between my web app tabs stopped.
No matter how many time I switch between my application's tabs, it never showed logger until refresh.
I'm aware that this may be a rare scenario, but I dearly need a solution from someone who might have faced this problem as well.
Any suggestion about any plugin to be used is also welcome
EDIT
Well now I got a hint of why this problem is happening, but haven't found any solution yet.
After following THIS example, I found that in chrome, you need to click inside the window after which focus event is fired, but not just on clicking the tab.

Related

Can't focus elements on load in Chrome - very weird bug (in Chrome?)

I have a very, very weird issue that only seems to be an issue in Chrome.
When a user comes on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.
This behaviour can only be reproduced in Chrome and not on localhost.
The difference between localhost and beta environment is:
beta env requires authentication (basic http auth)
files in development env are concated in a single JS and single CSS file and both are minimized
beta env includes hotjar, while there's no hotjar on localhost
There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.
The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).
I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password).
I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.
The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?
EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.
So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.
For those who are also affected by this bug in Chrome, you can track the bug progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=740652
Meanwhile, here's a hacky solution for those interested:
$(document).on("ready", function() {
var $inputs = $("input");
$inputs.off("click.trick");
if (!sessionStorage.fixedChromeFocus) {
sessionStorage.fixedChromeFocus = "true";
$inputs.on("click.trick", function() {
var win = window.open("/", "_blank");
setTimeout(function() {win.close()}, 1);
$inputs.off("click.trick");
});
}
});
The goal is to, somehow, interact with the browser outside of the current page, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).
I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth.
What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).
The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

Two tabs the first is stuck when you in debug mode in the second tab

we have application that from one window you open new window (tab) in the browser.
this is working fine ,the problem is that if you open debugger in the second tab
the first tab (which initistate the proceess) is stuck I guess its becouse they share the same JS VM ,my question is if there is a way to overcome this issue?maybe web worker or something else...
Any idea why does it happen and some hint to search for solution will be very helpful.
I asked this question some time ago here, and using IE11 seems to work fine.

Google Chrome closes when I open a new tab using my browser action Javascript, no idea why

I'm in the process of writing a Google Chrome extension, and I'm hung up on what should be a very simple task. I have a browser action that opens a popup, "popup.html", which then loads a small Javascript file, "popup.js". As soon as I get the DOMContentLoaded signal from the popup page, my Javascript opens a new tab with a certain URL. This behavioral quirk is by design - in some cases it will display a menu, and in other cases it will just open this URL.
I currently have some very simple code which is supposed to do this, but whenever it opens this tab, Chrome suddenly closes. I'm using a Mac (OS X Mavericks), so it doesn't crash entirely (still running), the window just closes. When I open it up again, the tab it was supposed to open is there, but the "popup.html" menu is awkwardly hanging over the UI still and won't go away.
Here is my complete popup.js file:
function stuff() {
window.open("http://stackoverflow.com/");
}
document.addEventListener('DOMContentLoaded', stuff);
I'm guessing that I may need to gracefully close my popup window before going to this link or something, but that seems like I'm overthinking it. After all, I've seen other extensions that have normal links in their browser action popups, and you can click those to open new tabs without any Javascript magic.
I've also tried using the chrome.tabs.create function, yet the same thing happens. The Chrome developer console doesn't show any errors. Thoughts?
Edit1: Just disabled all extensions and tried again. Still breaking. Going to boot up my Windows 8 box and see what happens on it.
Edit2: Works with a short delay before opening the window now on Mac, see my answer below.
Ok, I think I may have figured this out, but it's still weird. I did this on my Windows 8 PC, and the browser didn't crash, but the browser action popup didn't close the way it's supposed to either.
On a hunch, I altered my code on the Mac to give the browser some time to render the popup window:
function stuff() {
window.open("http://stackoverflow.com/");
}
setTimeout(stuff, 500);
Worked without a problem on the Mac this time. I'm guessing it's an issue with the browser being interrupted while rendering the popup window, but it's still weird. I would still appreciate an explanation from someone who actually knows what's going on here! :-)

Closing a tab without closing the window

Hi I have set up a task in my task scheduler to login to my UTM by opening a firefox window at regular intervals. When the relevant URL is loaded a auto-login GM script works on it and logs me in to UTM.
I would like to close that tab after the login is done. If I use
window.close();
It works fine but if no other tab is opened at the time, it simply closes the window.
Without going into details of UTM I would like the following -
A GM hack which closes the tab only if other tabs are already open. If it is the last tab of the window, then it should just replace it with a blank tab (so that window is not closed).
Probably GM cannot obtain any info about the other tabs, but is there any hack ?
As far as I'm aware this isn't possible, if nothing else then for security reasons: you don't spam javascript from your video streaming tab collecting all your data and submitting forms on your behalf.
Here's a thread with a solution that worked for IE7 that you may be able to manipulate but as I said it's not likely.
If you decide to have ago, don't think about identifying the number of tabs, it won't happen, instead focus on determining whether or not there are multiple tabs.
The linked example uses if(clientY == 0) to determine whether or not the browser is closing. This would be a good starting point.
Again, for security reasons, you won't be able to find out information about open tabs.

Open Popup when user leaves the site (but not when user clicks on an internal link )

Here is what I need to do:
I want to launch a popup window when the user exits the website.
I found code that detects when the user closes the window, but that same code ALSO fires when the user clicks on an internal link,
(which I don't want).
Any ideas how to do this?
I've looked everywhere and I can't find a clear solution.
This solution needs to work on all three browsers : FireFox / IE / Safari!
You can't, there is no such event that will be triggered when someone exits the site. That's why in the early 2000s someone too clever invented "pop-unders": popups that will open immediately, but will be put on the background, behind the browser's window.
Which are one of the most annoying things on the web, and the first ones that any popup blocker or antivirus will kill :) On the other side, there are legitimate uses for that, like most surveys you see (I got one from microsoft some days ago).
Never rely on popups, unless you are writing an intranet site, or one where you are sure all of your visitors will not have a popup blocker.

Categories