pageshow event on iphone fires only once - javascript

I'm trying to use pageshow event on safari (iphone) to fix some problems with back button cache. But it seems to work only one time when using back button.
I have this handler on page A:
window.addEventListener("pageshow", function () {
alert("pageshow");
});
Then i go to page B and go back to A - everything works fine. But when I go to page B again and go back to A again, then nothing happens.
example:
go to this fiddle: https://jsfiddle.net/y278q8q0/, then navigate to any other page and play with back and forward buttons. The event will fire only once.
That how it looks on iphone 6 with ios 8.4:
https://vid.me/5WPe
edit:
question was marked as a duplicate of this one: 'pageshow' is not received when pressing "back" button on Safari on *IPad"
It's hard to say if those problems have the same cause. In my case event always fires once at the beginning. Also I tried to implement all non-jquery solutions from mentioned question and none of them is working for me.

Related

Popstate not triggering on Chrome for Android when clicking the back button

Upon clicking the back button in the browser, I would like to prevent the default behaviour of going one page back and instead do an action. I'm using the "popstate" event listener. The following function (I'm using Vue 2) works in all major browsers and even in Firefox for Android, but when I test it in Chrome for Android, it simply goes back one page without popstate being triggered at all.
mounted() {
history.pushState(null, null, <current-url>);
window.addEventListener("popstate", () => { alert(1) });
}
I tried wrapping the popstate event inside the load event and giving it a timeOut of 0, but it still didn't work specifically in Chrome for Android. The version I'm testing on is 93.
I did some more research and it seems that Chrome won't let you use popstate if there is no user interaction first. As long as you click on something or scroll down on mobile, popsate will work, otherwise it won't. I tried to simulate user interaction with click(), but that didn't work either. It seems Chrome wants genuine user interaction. I also realized this is sort of a duplicate of: Chrome popstate not firing on Back Button if no user interaction

Chrome and beforeunload/unload

I have a seemingly simple requirement but I have been stuck for days. Can someone give me a hand?
I need a confirmation prompt if the user tried to close the pop-up window
if the user click ok to close, I need to call an ajax call
My original design is to add an onbeforeunload event handler, have it returns a string which triggers a prompt. Works perfectly.
The problem is the next part. Added a unload listener, a pagehide listener, and a visibilitychange listener - in all three cases, Chrome doesn't fire the event if the user close the window, only if I refresh the window. Firefox works perfectly. I am using a sendbeacon call which should work in these scenarios and if I add a breakpoint to pause before the window closes, the beacon is sent, so it seems like Chrome is closing the document too fast and never bother sending the last beacon, which makes the whole exercise pointless.
Has anyone face similar issues and if so, any way to work around it?
I'm struggling with the same problem.
Reading about the event on the documentation I've noticed that it is an unstable event, and moreover in the compatibility table, Chrome is set to "not supported".
But I noticed that chrome fire the event one time only.
If I close the browser and then i re-open it, the first time the event is fired, but it not work with tab closing.

If you don't hit a button in iOS Safari RIGHT ON the click event wont' fire

I had users of my PWA app complaining that they sometimes had to click a button maybe 2-10 times for it to fire. I could not figure out what caused this. First I thought that maybe it was due to an error in my code or a bad internet connection, but then I realized it:
If you don't hit a button in iOS Safari RIGHT ON the click event wont' fire.
In other words: If you tap the button with your finger, and then move your finger slightly in either direction, even just a few millimeters, and then release your finger, the click event wont' fire.
This seems to be happening quite a lot for regular human users, and they are left frustrated over what's happening (or not happening), without knowing why, or blaming my code.
I think the click event should fire if you release your finger while still being inside the button-area. This is the default behavior in Chrome for Windows at least.
Is there a solution to this? Trust me, I've been Googling this a lot and tried many different things, from different event-handlers to JS tap-libraries.
EDIT: The same thing seems to happen if you hold your finger down for more than just a split-second.
Here's a link to a PWA test app that I made containing a simple button and the code below: [the link has been removed]
Feel free to "download" the PWA by opening it in Safari and then hit Share -> Add to Home Screen.
document.addEventListener('click', function(e) {
if (!document.body.contains(e.target)) {
return;
}
if (e.target.matches('#testButton')) {
alert('Button clicked!');
}
});
<div id="testButton">Click me to test</div>
This was caused by a bug in Safari Mobile. I solved the problem by adding onclick="void(0)" to all of my buttons, like this:
<div id="testButton" class="button" onclick="void(0)">Click me to test</div>

Firefox keydown not working when page is initially loaded

This maybe a no brainer to you. but I am trying to figure out why keydown is not triggered in firefox upon an initial load.
$(document).keydown(function(){alert("test")})
I add the above code in my javascript and when I open my page and without clicking anything but pressing key. I can see that the key pressed is not cautch at all. However, after I click the background of my page then I press keyboard. I can see the key is caught then.
This doesn't happen in Chrome, only in Firefox.
Is anyone familiar with this by any chance.
Thanks

Why do the first few clicks do not work in Chrome?

My webapp uses jQuery along with jQueryUI components.
The events are attached using the following scheme:
$(function(){
...
$('#id').click(function(){...});
// and
$(document).on('click', '.dynamic-element', function(){});
...
});
If I click a button on the page, it happens sometimes that the first few clicks not trigger the click action, although the button "pushes in".
The weirdest thing is that I only observe this in Chrome 32, not Firefox 27 nor Safari 6 (I use a Mac). I've got real frustrated with this. The console does not give any errors.
What could be the problem? Is there any workaround?
Update
I have tried this (within a $(document).ready of course):
$('#share').click(function(){
console.log('share clicked');
// ... further code ...
});
after 20 page refreshes, I've got a completely non-registered click. :S
Here we go. :)
Update 2:
Here comes the fiddle: http://jsfiddle.net/22P2D/
Open console, open page in two tabs, and you have a fair chance it produces the phenomenon. As it did not to me.

Categories

Resources