I dont know if this is a bug that was introduced on latest version of chrome because it does not happen on any older version of chrome nor on any version of Firefox. Maybe it's a feature or a bug, but I still need a way to fix it but after trying from 2 hours, no luck.
The problem: I have a page with a button and an iframe inside. When I click the button I change the iframe SRC. It works fine. However, if after clicking the button I click the BACK button of chrome browser, it makes the iframe reload the SRC that was assigned.
When I click the BACK button of chrome, it should not mess with iframe history. This problem just started happening now, only on latest version of chrome.
Any way I can fix this using the history object, I mean, preventing iframe navigation to affect the top window history?
I have a problem when I am trying to check the source of an interesting page which keeps refreshing automatically every 3-5 seconds (presumably due to some js script) which resets my Inspect Element Inspector window every time the page is refreshed.
Is there any other way other to stop that page from refreshing or perhaps the Inspector window from resetting itself other than turning on NoScript to stop the page from refreshing automatically?
Usually I just open DevTools, switch to the appropriate panel if necessary, and hit pause.
Opening DevTools: Via menus, or by press F12, Ctrl+Shift+I, or Cmd+Shift+I depending on browser and OS.
Switching panels: Pick the panel from the tabs at the top of DevTools. It'll be called "Debugger" (Firefox, IE) or "Sources" (Chrome) or similar.
Pausing: In the Debugger/Sources panel, click the pause button (usually looks like the pause button on a television remote control, ||) or press the keyboard equivalent. Keyboard equivalents are
Firefox & Chrome: F8
IE: Ctrl+Shift+B
(Updated 2020-03-30)
In Firefox 74 this option is in Options -> Privacy & Security -> Permissions
(Original reply)
Firefox has the option to prevent refresh natively, the option is in Advanced->General->Warn me when websites try to redirect or reload the page
The most popular solution for this problem is to trap the beforeunload event. The browser will ask the user for confirmation to leave the page. The code, in its simplest form, looks like this:
window.onbeforeunload = function() { return true }
You can enter this code in console. Alternately, you can simply paste the following URL in the browser address bar (console not required). You can even bookmark it.
javascript:window.onbeforeunload = function() { return true }
Be advised that modern browsers might chop off the javascript: part when you paste it inside the address bar; make sure you type it back.
To determine the cause of redirect in Firefox, try the following:
Open Web Developer Tools (CTRL + SHIFT + I), open "Toolbox Options" and check the "Enable persistent logs" option. This makes the logs persist across page loads (logs are cleared otherwise).
Now switch to "Network Monitor" tab.
Open the URL and let it refresh.
Inside the Network Monitor > Cause column you will find out why the page reloads.
The cause column is pretty ambiguous (Chrome does a much better job). However, if JavaScript was used to trigger page (re)load then it at least shows you the filename and line number of that script.
When the page is still loading, you can press the Esc key. While the page is still white, press it. When you stop the page from loading at this point, this usually stops all the auto loaded javascript. Any scripts that run on actions are usually not effected. Each page is different, try different timings.
When I use a site called NovelUpdates there is javascript that can make certain elements hidden, and when I press Esc on page load all the elements that would be hidden after page load are visible. Then when I click a button that would execute javascript that operates with no problems. NoScript isn't going to solve your issue I believe.
Another example of this are those websites with annoying boxes that pop out after 10 seconds that says you aren't a member and can't view any more of this site without logging in, like some news article websites.
What you could do is use the command exit(), which is the equivalent to die in php and simply stops the script.
If you don't know what's causing it and you don't want to look for the "bad boy", then you might as well stop the entire script at the very bottom of the page.
I've implemented history.replaceState() to my site when clicking to load more. Each time you click, the script adds extra elements to the container using an ajax call and then uses replaceState. Everything is working as expected on that front, but when you click to load more a few times, and then click to refresh the page, or cmd+r, the page is refreshed, but then jumps to the bottom of the browser. My thought is that it's because it's trying to keep the same scroll position (maybe because the browser thinks it's on the same page? I dunnno, but since the page was refreshed a lot of the inserted elements are removed, so it just goes to the bottom.
Adding an anchor tag seems to work for firefox on mac, but safari is still jumping to the bottom, as is mobile safari.
I have a small problem which is dependent on browser. If you open this link, http://mazzeyprod-env-wbyfpn2srt.elasticbeanstalk.com/ in chrome and mozilla firefox you can see that in Mozilla Firefox if click on any buttons on the header the page smoothly transitions but if you do the same in Chrome, it reloads the entire page. But in Mozilla the Header always stays on the page. Can anyone help me how can I fix it ?
Both browsers are loading the pages as you navigate. It happens that ff does not make it apparent when reloading parts whose content remains the same. To notice the reloading you may use firebug or dev tools of ff and change the color of a menu link, once you navigate to another page the menu link will be reloaded and the color will be reverted.
I have a script that writes an iFrame which loads a page. I created a JSFiddle to make things clear:
link JSFiddle loading CNN in a frame
This loads CNN in a frame. If you scroll down in the frame to the news and click on the new articles and then 'back' there is some strange behavior in both Safari and Google Chrome: clicking 'back' doesn't take the iframe 'back', it takes the entire parent frame 'back'. How can I prevent this from happening?
Also strange is that fact that this doesn't always happen. Try it out for yourself, click at least 5-10 links and you'll see that the fiddle will reset itself every now and then. And that shouldn't happen...
This is behavior that only seems to happen in Safari en Chrome, Opera and IE don't seem to have this problem...
Browser registers history events when you click different URLS, since iframe is part of the page u are on it will register the click inside the iframe as a history event of the parent page. Different browsers may have slightly diferent behavior - I expect FF and Chrome be one way and IE behave slightly different. However testing your example both Chrome and IE worked exactly the same and pretty much as expected.
So to clarify:
Loading JSFiddle is a historical event as far as browser is concerned.
Clicking the button to create and load an Iframe is NOT a historical event.
Clicking a URL link within the Iframe window is a historical event.
At this point u have 2 states that the browser remembers and you can go back and forth in history between them.