I shall open a dialog which contains an iframe, then set the focus inside the iframe once the dialog is opened.
Currently, I try to get the focus on the iframe when the content is loaded:
<iframe src="../credits.html" onload="this.contentWindow.focus()"></iframe>
It works fine for all browsers except for Firefox, and I don't understand why.
Can someone tell me why? Thanks
I shall open a dialog which contains an iframe, then set the focus inside the iframe once the dialog is opened.
Currently, I try to get the focus on the iframe when the content is loaded:
<iframe src="../credits.html" onload="this.contentWindow.focus()"></iframe>
It works fine for all browsers except for Firefox, and I don't understand why.
Can someone tell me why? Thanks
Share Improve this question edited Aug 9, 2015 at 17:07 Steve 1,51514 silver badges22 bronze badges asked Jan 17, 2013 at 10:42 GuernGuern 1,2671 gold badge12 silver badges30 bronze badges 6- 2 I would like to know this too. It's 2015 and Firefox does not seem to allow an iframe to even focus on itself or anything inside it. This extremely simple fiddle does not work in Firefox: jsfiddle/4b32fgd8 – user24950814234 Commented Aug 3, 2015 at 1:03
- Possible duplicate of stackoverflow./questions/1508348/… – Léo Lam Commented Aug 3, 2015 at 14:15
-
@user2867288 The reason your fiddle does not work is probably because JSFiddle is setting the focus into their code editors, or otherwise stealing the focus so that your frame cannot. I can't reproduce this issue ourside JSFiddle, even this code works:
<iframe src="https://fiddle.jshell/4b32fgd8/show/"></iframe>– Alexander O'Mara Commented Aug 4, 2015 at 18:07 - As for the original question, this code works about half the time for me, and fails the other half. Very strange. – Alexander O'Mara Commented Aug 4, 2015 at 18:09
- maybe it's a timing problem – Guern Commented Aug 7, 2015 at 14:06
2 Answers
Reset to default 4 +25Firefox seems not to have contentWindow property, you should use contentDocument
Update:
After a small debate I came up with a better solution:
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery./jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#xframe").bind("load", function(){
$(this).contents().find("#xa").focus();
});
});
</script>
</head>
<body>
<iframe id="xframe" src="./y.html"></iframe>
</body>
</html>
In this example, I assume that there's a input field inside y.html that has a "xa" id. It worked both on Chrome and Firefox.
Old answer
Even better you should use jquery, something like:
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery./jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#xframe").focus();
});
</script>
</head>
<body>
<iframe id="xframe" src="./y.html"></iframe>
</body>
</html>
Of course you could do some extra check to see if the iframe is ready.
More info can be found here http://www.w3schools./jsref/prop_frame_contentwindow.asp
Try do this using jquery
// focus an input in iframe
$('#xframe').contents().find('input').get(0).focus()
// or simply iframe window
var iframe= $('#xframe')[0];
var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView;
iframewindow.focus()