Question

我正在使我的IFrame成为全屏，我想使用javascript在父禁用[on tabbing]中制作DOM元素。有什么想法吗？

提前致谢

Answer 1

我认为这个场景非常类似于内容弹出式窗口（灯箱），您可以将其用于：

将键盘焦点移动到iframe的顶部。
将键盘焦点保持在iframe中。

要将键盘焦点移动到iframe，请使用正确的链接（使用href）并触发：

$("#myIframe").attr("tabindex", "-1").css("outline", "0");
$("#myIframe").focus(); // separate line to ensure the tabindex is applied first.

要将焦点保持在iframe中，找到第一个和最后一个元素并循环它们：

(function(){ 
    var firstLink = $("#myIframe a:first").get(0);
    var lastLink = $("#myIframe a:last").get(0);

        $(firstLink).keydown(function(e) {
            // if you shift-tab on first link, go to last
            if(e.shiftKey && e.keyCode == 9) { 
                e.preventDefault();
                $(lastLink).focus();
            }
        });
        $(lastLink).keydown(function(e) {
            // if you press tab without shift, loop to first link.
            if (!e.shiftKey && e.keyCode == 9) { 
                e.preventDefault();
                $(firstLink).focus();
            }
        });
    })(); // end tabloop anonymous function

JavaScript / jQuery不是我的强项，所以你可能需要调整它。例如，如果第一个/最后一个可聚焦元素是一个不起作用的表单控件。

此外，值得了解的是，屏幕阅读器不一定使用标签来浏览页面，它们是“箭头”（浏览模式）并且不一定会触发焦点。为了将它们保留在iframe中，您实际上需要“隐藏”其他所有内容。

如果主要内容和iframe位于同一级别，这很简单，您可以从以下开始：

<div class="mainContent">...</div>
<iframe id="myIframe">...</iframe>

页面加载时使用：

$("#myIframe").attr("aria-hidden", "true");

当iframe成为焦点时：

$("#myIframe").attr("aria-hidden", "false");
$("div.mainContent").attr("aria-hidden", "true");

所有这些技巧（在灯箱的上下文中）都在这里：https://gist.github.com/alastc/7340946

注意：完整筛选iframe的整个概念听起来有点可疑，如果你提供了一些上下文，可能会有更好的解决方案吗？

使父DOM元素不可读

1 个答案: