I have a navigation issue in a SPA with React 16.12 and React Router 4.3.1 which only happens in the Firefox browser.
For example, starting from the URL /recommendedProducts I navigate to the URL /forms. If I reload the /forms page by pressing enter in the address bar, and immediately I press the browser back button, the URL changes to /recommendedProducts but it doesn't refresh. Investigating and comparing the behavior between Firefox and Chrome I noticed that the popstate event is not triggered in Firefox.
Here are the routes:
<Switch>
<Route path="/recommendedProducts" component={RecommendedProducts} />
...
<Route path="/forms" component={Forms} />
</Switch>
If, instead of reloading the /forms page this way, I press F5 all is OK, the browser back button works as expected.
Why Firefox doesn't trigger the popstate event and how can inform React Router to refresh the page?
EDIT:
I just find out this React Router issue, this is exactly the problem:
https://github.com/ReactTraining/react-router/issues/837
It seems that the problem has to do with the Firefox cache. As indicated in https://github.com/ReactTraining/react-router/issues/837 defining the unload event handler disables it.
Here the official docs:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
Previously I tried also to use the pageshow and pagehide events by refreshing the page from there but they are not always triggered.
Related
i had took a look to another threads about chrome and custom protocol apps, but i couldn't resolve a doubt i've got. In my web app, when you click a button it fire a new tab with an webpage (window.open(url, "_blank")). The new tab is opened with the url (annother web app with https protocol). This url fire a javascript function on load that verifies some things and then generate a custom url, for example myurl://base64code, and put it in an existing iframe in this way windows.frames['myframe'].location.href=theCustomProtocolUrl. i tried in different ways (location.replace, create a new iframe and set the url, etc) and i always have the same problem. If i refresh (ctrl f5) the page it always show the dialog or if i open the link with the developer console opened. But if i click my button and the page is opened in a new tab it doesn't work only if i refresh (ctrl+f5). This works perfectly on IE11, it launch the app directly.
Any ideas why chrome, and edge, works like this?
UPDATE: I have found the reason, is i use the protocolcheck.js (https://gist.github.com/vladimirtsyupko/cfcd332476b16683bb0b) library.
First i tried to open a protocol with the timeoutHack (it use blur event) and then, after failing, it fires the other url (in this case https) and the dialog doensn't appear. I found a bug with blur event on chrome > 85 https://bugs.chromium.org/p/chromium/issues/detail?id=1137801
Thanks in advance
Clicking on a link to our webpage using
Link
opens a new tab and closes it immediatly. This happens on all browsers apparently. Deactivating adblock and alike does not change anything.
Using the url without target="_blank" or right click -> open in new Tab however works fine.
The web page is an angular project and does not use any sort of trackers. Furthermore this behavior started only recently, so I assume it's due to some change in the page.
Any hint why this happens or where to start debugging this?
Found it.
I had a line window.close(); due to a workaround for a popup for facebook login, implementing this:
Facebook Login not working in PWA app if app is in stand alone state
Unfortunately, I can't reproduce the issue in jsfiddle, but this test file reproduces the issue: github file
Basically, I have a standard popup and a close button inside that popup. I can open the popup. I can close the popup. I can do this over and over again without a problem.
However, when I bind the "popupafterclose" event to the popup, which reopens the popup after receiving that event. Now something weird happens.
On my iPhone 5S's Chrome (v38.0.2125.67), after the second close, the page goes back beyond the popup and to the previous page, as if it was hitting "back" twice.
This only happens on my phone's chrome. The test page works fine on my phone's safari. it also works fine on my mac's chrome (v38.0.2125.104).
I suspect this may be some sort of bug prevention mechanism (like preventing too many popups or infinite loops), but wanted to confirm. I'm hoping I'm just doing something wrong in my code.
If you comment out the "popupafterclose" event, you'll see that you can open/close the popup again and again in every browser including mobile chrome. But automatically re-opening the popup and closing it leads to backing out twice.
You may be wondering why I would want to immediately open the popup after I just closed it. My app has a "play" function that initiates the popup. Upon closing it, I want it to continue to "play" after the popup closes, and some time later, the popup may initiate the popup again. After closing that second instance of the popup, my app backs out of itself.
I am using facebook's js SDK. I use FB.init to initiate the fb object and FB.getLoginStatus to check user's status. Everything works fine when load the page. But when i click some link inside my page and then try to go back to my last page by clicking back button of browser FB.getLoginStatus is not get invoke the callback. This problem occurs only in Chrome's. In all other browsers it works fine.
If i clear the browser catch and then go back then everything is working fine
I also remove the all extension that may causes a problem.
Thanks in advance.
There is a front-end problem in my web-app:
for example I have a page with plenty of JS code executed on that page. There is a link on it like
Examle Link
I want to click on this link before page is loaded completely and actually I can do it in FireFox. Current page stops to loading and browser redirects me to clicked link.
But in Chrome nothing happens and I have to wait until the page will be fully loaded. In other case I see in DevTools that this request got "status=cancelled"
How can I change Chrome to treat my links in other way?
Chrome users don't want to wait till page is loaded if they want to go further clicking the link...
I had read about prerendering and similar stuff but still have no ideas how to resolve it...
I would appreciate for any hints.