Chrome and IE focus on Iframe - javascript

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();

Related

Prevent iframe navigation from changing top window history states

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?

Window events lost after removing iframe

I have an issue where a form is embedded in an iframe and after the form is submitted, the iframe is deleted from the DOM. Immediately after the form is deleted (the form was the last thing to have focus) I am unable to detect events that are bound to the root window element.
The frame is being loaded from a separate domain, although it does not matter for this example, it only matters that I have no control over the scripts on that page.
I understand that I cannot detect DOM events in the iframe, but all events are lost until the user clicks back on the DOM after iframe removal. This happens in both Firefox and Chrome. IE appears to return focus back to the original DOM as expected. I have not tested in other browsers.
$(window).keydown(function(e){
console.log (e.keyCode);
});
var $iframe = $("<iframe src='www.example.com'>");
$("body").append($iframe);
window.setTimeout(function(){
$iframe.remove();
}, 1000);
(The code above is just an example, i have included a working codepen to illustrate further- http://codepen.io/anon/pen/WQroqe)
To use the codepen -
Click the "click to load iframe button".
Make sure you click in the iframe so it has focus
After the iframe deletes, type anything and notice the DOM does not log your key strokes.
Click on the DOM and notice that your keystrokes are being logged properly.
Use Case: Form opens an iframe and submits, then removes itself from the DOM. I want to be able to detect keyboard events after the form is submitted without the user needing to use their mouse.
Question: I thought the top most DOM element was "window" and if this is not capturing the keyboard events, what is? There are no other DOMs currently present (i.e. iframes) as far as I know. I tested this is both firefox and chrome. Any explanation as to what is happening and why what I am trying to do is not possible or a way to capture the events would be greatly appreciated.
(My current solution is to use a MutationObserver to watch for the iframe to disappear and force focus back on the window. I also know I could use a setInterval to continually check for the iframe. Both solution feel like I am doing extra work).
after closing the iframe, focus the window using $(window).focus(); if you must
in the sample you'd do it like
$iframe.load(function(){
window.setTimeout(function(){
console.log("deleting");
$("#deleteMe iframe").remove();
$(window).focus(); // <======
}, 5000);
});

Scrolling stuck after interacting with iframe

I have a site in which I'm implementing parallax using skrollr.js.
In that site I'm also integrating Flash objects created by Storyline, in iframes.
My problems is that after the user interacts with the Storyline in the iframe, when he tries to continue scrolling to the rest of the content, sometimes the page gets stuck and stops scrolling.
This happens only in Firefox (it doesn't happen in Chrome, and surprisingly enough - not in IE11 either).
The only way to "unstick" the scroll is by the user clicking the browser window again. Of course, that's not intuitive to the user, so I'm trying to find a way to emulate that click programmatically.
I thought that maybe the focus gets lost and the mouse click returns it, so I tried returning the focus to the body programmatically, but that doesn't help:
setInterval( function () {
if ( document.activeElement.tagName.toLowerCase() === "iframe" ) {
document.activeElement.blur();
}
}, 1000 );
In the end, this problem got solved by changing the wmode parameter from window to transparent.
The way to do that is as follows:
I can't find where to change wmode to transparent in Storyline, but I found how to change it in the generated files :
In the root of the generated directory, find the story.html file.
Go to line 134, where the g_strWMode parameter is defined.
Change its value from window to transparent.
That's it!

Javascript - Doesn't want Refresh parent page after closing Iframe Modal box

The basics: I have a webpage where a user can click on the iframe to view the picture of car,as soon as i click on the iframe the parent page get refresh but the URL doesn't change..nevertheless it seems only chrome browser is affected..have check same scenario in other browser but its working fine
We need to see the code to say what you have done with the iframe.But here is a similar question and see if you are experiencing the same problem with the code.
Clicking an anchor inside an iFrame behaves differently in Firefox and Chrome

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.

Categories