我需要以编程方式为 iframe 中的“父”框架设置焦点。
请尝试下面的例子。
- 01 - 首先点击
01 显示面板，将显示一个带有 iframe 的 div - 02 - 在
02 click me的 iframe 内单击，带有 iframe 的 div 将被隐藏
在第 02 步，我需要将焦点设置为从 iframe 到“父”框架。
我正在使用 window.focus() 执行此操作，它在 Chrome 上运行良好。
我的问题是在 Firefox 上，脚本将焦点放在 iframe 上(查看 div resultFocus 中的结果)并且不关注“父”框架
我需要解决 FireFox 问题，知道如何修复它吗？
测试.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#panel {
position: absolute;
top: 50px;
left: 250px;
width: 250px;
height: 150px;
}
#resultFocus {
position:absolute;
left: 650px;
}
.btn {
width: 150px;
height: 30px;
margin: 5px;
background-color: lightblue;
}
</style>
<script>
(function (window) {
var _hidePanel = function () {
var panel = document.getElementById('panel');
panel.style.display = 'none';
};
var _showPanel = function () {
var panel = document.getElementById('panel');
panel.style.display = '';
};
var _addListeners = function () {
var btnHide = document.getElementById('btnHide');
btnHide.addEventListener('click', function (event) {
_hidePanel();
_setFocusMainWindow();
_showActiveFocus();
});
var btnShow = document.getElementById('btnShow');
btnShow.addEventListener('click', function (event) {
_showPanel();
});
var btnInner = document.getElementById('iframe').contentWindow.document.getElementById('btnInner');
btnInner.addEventListener('click', function (event) {
_hidePanel();
_setFocusMainWindow();
_showActiveFocus();
});
var btnShowActiveFocus = document.getElementById('btnShowActiveFocus');
btnShowActiveFocus.addEventListener('click', function (event) {
_showActiveFocus();
});
};
var _showActiveFocus = function () {
var resultFocus = document.getElementById('resultFocus');
resultFocus.innerHTML = '';
resultFocus.innerHTML = document.activeElement;
};
var _setFocusMainWindow = function () {
window.focus();
};
window.start = function () {
_addListeners();
_hidePanel();
_showActiveFocus();
}
})(window);
</script>
</head>
<body onload="start();">
<div id="btnShow" type="button" class="btn">01 show panel</div>
<div id="btnHide" type="button" class="btn" style="display:none;">03 hide panel</div>
<div id="btnShowActiveFocus" type="button" class="btn" style="display:none;">show active focus</div>
<div id="panel">
<iframe id="iframe" src="include.html"></iframe>
</div>
<div id="resultFocus" rows="2" cols="20"></div>
</body>
</html>
include.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body {
background-color:orange;
}
</style>
<script>
</script>
</head>
<body>
<h1>I am an iframe!</h1>
<button id="btnInner" type="button">02 - click me</button>
</body>
</html>
最佳答案
您可以通过添加一个不可见的假焦点目标并在聚焦于窗口本身之前以编程方式聚焦进出该目标来解决此问题。方法如下:
在 start() 的开头添加 DOM 中的假焦点元素:
window.start = function () {
var input = document.createElement('INPUT');
input.id = 'fakefocus';
input.type = 'checkbox';
input.style.position = 'absolute';
input.style.left = '-999em';
document.body.appendChild(input);
_addListeners();
_hidePanel();
_showActiveFocus();
};
在 btnInner 的 click 事件监听器中，在 _setFocusMainWindow(); 之前将焦点移入和移出假焦点元素:
btnInner.addEventListener('click', function (event) {
_hidePanel();
var ff = document.getElementById('fakefocus');
ff.focus();
ff.blur();
_setFocusMainWindow();
_showActiveFocus();
});
实际上，在这样做之后，您甚至可能不再需要 window.focus();。
关于javascript - 如何以编程方式将焦点应用到 Firefox 中 iframe 中的父框架(解决 window.focus())？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35484728/