Question

我需要以编程方式为iframe中的“父”框架设置焦点。

请尝试以下示例。

01 - 点击01 show panel上的第一个，并显示带有iframe的div
02 - 在02 click me上的iframe中点击，将隐藏带有iframe的div

在步骤02中，我需要将焦点从iframe 设置为“父”框架。

我使用window.focus()进行此操作，这在Chrome上效果很好。

我的问题出在 Firefox 上，该脚本将焦点放在iframe上（请参阅div resultFocus中的结果）并且不关注“父”框架

我需要为FireFox解决问题，知道如何修复它吗？

的test.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>

可能相关： How to get window.focus() to work in firefox

Answer 1

您可以通过添加一个不可见的假焦点目标并在关注窗口本身之前以编程方式聚焦进出该目标来解决此问题。以下是如何做到这一点：

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

在_setFocusMainWindow();的{{1}}事件监听器click btnInner之前聚焦进出假焦点元素

btnInner.addEventListener('click', function (event) {
    _hidePanel();
    var ff = document.getElementById('fakefocus');
    ff.focus();
    ff.blur();
    _setFocusMainWindow();
    _showActiveFocus();
});

实际上，在这样做之后，您甚至可能不再需要window.focus();。

如何以编程方式将焦点应用于Firefox中的iframe中的父框架（解决window.focus（））？

1 个答案: