I have an IFrame with some buttons in it. When the buttons are clicked, the parent DOM is manipulated (it's all in the same domain, so don't worry about the same-origin policy).
Since the user clicked on a button, the focus goes to the IFrame. However, I'd like to move the focus back to the parent document (mostly due to this FireFox problem).
How can I do this?
Edit: I've created a js-fiddle that shows the problem. While focus()
seems to work if you call it on parent form elements, it doesn't work in general. As you can see from the js-fiddle there are no form elements in my parent document.
If you want to set the focus back to the outer window from inside the iframe, focussing the outer window itself is unlikely to give any visual feedback to the user, so it is better to focus a known form element in the outer page.
You can do this as follows:
<html>
<head>
<title>Outer</title>
</head>
<body>
<iframe id="iframe" src="inner.html">
</iframe>
</body>
</html>
<html>
<head>
<title>Inner</title>
</head>
<body>
<form id="innerForm">
<input type="button" id="innerButton" value="Inner button" />
</form>
</body>
<script type="text/javascript">
// When we click the inner button...
document.getElementById('innerButton').addEventListener('click', function() {
/*
* Do whatever you need to do here
*/
// Focus the parent
parent.focus();
});
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With