I am using visibilitychange event of the browser. The website is for mobiles. So I test it from my mobile.
document.addEventListener('visibilitychange', (e) => {
console.log("visibility changed", e);
})
This could be caused by many different things.
switching apps back and forth
force-closing app
when the screen turns off
Is there any way to detect what behaviour caused visibilitychange listener to get called? I tried e.target and e.srcElement, but in all cases, they seem to be the same. Any ideas?
Short answer: you can't
As stated in the MDN documentation for the visibilitychange event:
The visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden.
You only have two value possible, visible or hidden. That's all the website can know. You are asking a web browser to have acute knowledge of what the user is doing on his operating system (did he locked his computer? did he switch to a new app? did he kill the web browser?) which is privacy wise, not very useful nor safe.
However if you absolutely need these features and can afford to make the user install your app, you could use something like cordova.
Related
I know there are lots of javascript plugins and libraries to allow users to pick emojis for text inputs, but windows and mac already have native emoji pickers (⊞ Win. or CTRL⌘Space), Is there a way for me to open these native emoji pickers when a user clicks in a text field instead of installing plugins in my website?
I already tried emulate button key press, but it didn't work at all.
Short answer is no.
In order to access any OS feature from javascript, you need a corresponding browser API to support.
AFAIK, there isn't an API for that. There's a discussion here which suggests adding <input emoji /> to standard but seems no traction gained.
Edit: Below is my original answer, revised. Comments pointed out I was focusing on the wrong aspect of the question, I totally agree.
However, the OP obviously has some wrong idea about what you can do in javascript to leverage browser ability. So I think it's still worth clarification.
You can't send arbitrary emulated keyboard event from js and hoping the OS will respond. Were it possible, it'd be a severe security issue on browser's part. Imagine open a website and it fires a series of keyboard event to your OS and wipes out your desktop (totally feasible through shortcuts).
You need to understand the runtime env inside the browser is basically isolated from the one of native OS. Whatever OS feature that's accessible to your javascript is totally up for browser vendors to decide. For security reason, they are super careful in making these decisions.
Also, make a distinction on "what browser can do", and "what browser allows you to do in js". Seeing Chrome has an "Emoji & Symbols" context menu item, doesn't necessarily mean it decides to grant you the same ability in js.
To further clarify why the emulated keyboard event is fundamentally different from the native one, I include a graph here. The blue arrow is how emulated keyboard event flows. The farthest place it can reach is the browser's internal event bus. It never got a chance to reach the OS event bus, so no way to notify native emoji picker.
Is there a way to trigger a system-wide keyboard event (i.e. emulate an actual key being physically pressed) from a Javascript Chrome App?
Currently I've got
target.dispatchEvent(new KeyboardEvent(..));
but this can only be invoked on a target element within the browser.
Ultimately, I want to be able to have a callback
function typeLetter(character){ }
that will type a letter character whether Chrome is the active window or not.
Any suggestions greatly welcomed!
I'm pretty sure this won't be possible between different applications. Even between browser tabs would be an issue I think. If it were possible there would be plenty of security issues that come with it.
Emulating key presses anywhere except the currently-running application (chrome) would open up a can of worms in regards to cross-site scripting attacks and key-logging hacks.
I have a web application in which I have a div element with an onclick javascript action. This web application works fine on iPads and desktops alike.
When it is launched within an iFrame on an iPad, however, all of the sudden, my clicks/taps are rarely and inconsistently acted upon. When running in an iFrame on a desktop browser, I do not see this behavior.
Has anyone seen this type of behavior before?
I'm not sure about your exact situation, but I was having a similar problem when my botton had a "mouseenter" event trigger binded to it. The mouse enter would be called on the first "tap" and the button would be called on the "second". Because of the way ipad uses those two events.
My solution was to use the browser detection tool from http://detectmobilebrowsers.com/ and set a var ismolible = to true or false, depending on whether the browser was mobile or not, then I used an if statement to unbind my mouseenter immediately if the browser was mobile. You do have to modify the http://detectmobilebrowsers.com/ code for ipad.
Hope this helps!
I'm based on Using the Fullscreen API in web browsers (http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers ) for fullscreen , but only works with a click event or with console firebug, not with submit event or mouseover or similar for made automatic. Is possible automatic fullscreen with html5 without click event or similar ?
Edit: I understand the security and accessibility reasons if not possible, but in some environments this can be hopeful.
No, it's not possible - for security reasons accessing full screen requires the user's "permission", and so is tied to browser input events.
No, that is not possible. The requestFullScreen() must be triggered by a direct user action (like a click) for security considerations. It's just the same as with popups.
Read https://wiki.mozilla.org/Security/Reviews/Firefox10/CodeEditor/FullScreenAPI and maybe https://wiki.mozilla.org/Gecko:FullScreenAPI for reference.
Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
Another solution is to use .mousemove() instead of .mouseover().
iOS ignores the .mousemove() event and triggers a click on the first touch.