I have a weird problem with a browser "back" button in Firefox and Safari.
The thing is, that if I enter a website home page, then click on any link in navigation, and then press the "back" button, it throws me not on a home page, where I previously was, but on a browser's start page.
It works normally, if I navigate for example from "shop" to "about us" section and then press back,
but when scenario is like: shop -> home -> about us -> back, it throws me on a "shop", not on "home"
in Chrome, Opera, IE11, Edge it works as it should, only Safari and Firefox have such problem.
I am using Angular JS, the back-end is built on WordPress.
Any suggestions ?
Its with SPA I guess.Also, you cannot touch the back button, since it is not on DOM . However, you can check for the web browser and you can create your own button function and provide functionality like :
How to detect Safari, Chrome, IE, Firefox and Opera browser?
and then use :
function goBack() {
window.history.back();
}
Related
I have some strange problem with browser tab freeze when working with React and Angular projects. Browser tab freezes when I save some file but only if I do something like click on hamburger menu that shows another component or any action with components or browser tab.
Example:
-> I change something in component (added more text, changed some color)
-> saved file to auto reload
-> I can see changes on my browser tab (it looks like browser tab is not "refreshing" but changes that I've made are visible after save)
-> I add something to my component (anything)
-> I can see changes on my browser tab and everything is fine every time when I add or change something. BUT when I try to do some action like click on hamburger menu button, click on some nav button that changes component or even when I click "Toggle device toolbar" in browser dev tools then my browser tab freezes. Rendered component is showing with big delay, when I click some button then action is delayed and I have to close browser tab but it takes a while to close when I click on it to close it.
This problem appears in every browser I use (chrome, brave, firefox). My computer system is Ubuntu 20.04.2 LTS. I use VSCode for coding.
I'm not sure if this problem appears because of some IDE or project configuration. I think it's because something in Ubuntu but I don't know what is going on.
Edit.
It does not matter if it is big project full of code and logic or new one with simple one "Hello, World!" component - the problem appears always.
I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.
To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.
I am using the offcanvas plugin from Jasny Bootstrap to implement a menu. It works as expected on a desktop browser. However, on mobile (iPhone 6 to be exact) the menu does not dismiss if the user clicks outside the menu. On a desktop browser, when an offcanvas menu is displayed, clicking outside the menu area dismisses the menu. Am I missing something, is this a bug, or is this expected behavior?
I reproduced this problem comparing desktop Chrome and iPhone Chrome using the supplied Jasny Bootstrap menu sample:
http://www.jasny.net/bootstrap/examples/navmenu-push/
tyipss!
Perhaps, it's a bug, though it looks like I can reproduce it only on a real iPhone6 (not in Chrome dev tools).
You can hide the menu explicitly in its callback function, like here:
$('.your-menu-selector').on('shown.bs.offcanvas', function() {
$('.your-backdrop-element').on('click', function() {
$('.your-menu-selector').offcanvas('hide');
});
});
Is it possible in mobile safari to get notified when the user clicks on refresh button. I want to prevent users from accidentally leaving the page as they might have some unsaved data on the page.
I have a code that shows a prompt in safari desktop but for touch safari it just does not show anything and refreshes the page.
The code you did is something like this?
$(window).bind('beforeunload', function() {
return "You have unsaved stuff";
});
It seems it doesn't work in mobile Safari
See this possible duplicate: Is there an alternative method to use onbeforeunload in mobile safari?
In my application, I have a div (iframe) that I am hiding/showing when a button is clicked, which displays the content of my .xap file. When I click the button to hide the div, I see the Silverlight frame disappear, and when I click the button to reshow the div, the Silverlight App reloads. Sometimes it'll appear blank too, but when I right-click the area, it has "Silverlight" listed in the context menu.
According to this post, the reloading is a FireFox bug.
Does anyone have a work around to the reload?
In IE, the div appears without having to reload the Silverlight App. I would like to get FireFox to have the same behavior. More over, I would like to stop FireFox from making the div content blank.