Prevent iframe navigation from changing top window history states - javascript

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?

Related

Make browser go to top of page when reloading page

I've made a simple HTML page. When I press the Reload icon in the browser (Safari Mac, Chrome Mac, Safari iOS), the page reloads, and retains the vertical position in the page.
Is this the default behaviour in browsers these days? I seem to remember that browsers used to go to the top of the page before (at least some years back). When did this change?
What is the best way to make the browser go to the top of the page when the page is reloaded? Simply hook into "On Document Load", and jump to an anchor at the top?
Use window.scrollTo(0,0) on document load
EDIT 1:
Something like this should do the trick:
document.onload = function(){
window.scrollTo(0,0);
}

What would cause click events to stop working in Internet Explorer 11?

I'm sorry for the vague question, but I'm dealing with a very vague bug.
Sometimes, in IE 11, my app just "dies." The pointer changes when you hover over a clickable element, but left-clicking does nothing, nor does right-clicking. Hover also stops working... if you hover over an element that has :hover CSS, the :hover CSS doesn't work. This only happens on specific pages, but not all the time... sometimes you load the page and clicking works, sometimes you load the page and clicking doesn't work.
If I hit refresh, clicking starts to work again.
If I use the keyboard to tab to an element and press "enter," I am able to follow a link I wasn't able to click on.
No errors in the console window.
IE version is RTM 11.0.9600.16428, running on Windows Server 2008 R2. I think it has also happened on Windows 7 and 7 Pro machines. I can't reproduce it on my Windows 8.1 machine with IE 11.0.9600.17728--clicking works consistently there.
Is it possible that, somehow, all the click handlers are getting taken off of everything? Even the window itself? That would explain why right-click stops working as well as left... I can't even get a context menu to use "View Source" or "Inspect Element." Nothing!
In case anyone else stumbles upon this: The problem turned out to be a bug specific to IE 11 for Win 7/Server 2008 R2. It doesn't happen in IE 11 for Win8.1+ or for any other browser.
Here's more info on the bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/205775/
I "fixed" it with one line of CSS:
use {
pointer-events: none;
}
I had a similar problem.
The text was entered into the input, after pressing Enter, an event onKeyDown was called, and the data was reloaded with recreating input element as well.
After that, the interface elements did not respond to mouse clicks. But as soon as you click on the different elements - it started working again.
My solution: before reloading the data, I had to trigger blur for the input.

How to stop the header from reloading in chrome

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.

clicking 'back' from an iframe changes parent window

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.

Chrome and IE focus on Iframe

I got an iframe on my page, and a menu that the user can select from to see the gallery he wants inside the iframe.
The gallery in the iframe have the abilty to be controled by the keyboard.
My problem is that I want to change the focus to the iframe so the gallery can be control, immediately afther the user choose the gallery.
I tried a few things and every code worked on Firefox without any problem, but with Chrome, and IE nothing really worked, in IE, and Chrome I have to manually press on the iframe to be able to control it.
(I'm pretty new in JavaScript and I'm using jQuery)
This code I toke from another thread for IE problem and its still didn't work (its only workin in Firefox).
$("#LinkTest li a").focusin(function () {
setTimeout(function () {
$('#iframeBoxID').focus();
}, 100);
});
Any ideas?
I think this might solve your problem, by focusing on the content window instead of the iframe element.
$('#iframeBoxID').get(0).contentWindow.focus();

Categories