Javascript 使父DOM元素不可读

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

---

提前感谢

我认为该场景非常类似于内容弹出（lightbox），您希望它：

• 将键盘焦点移动到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不是我的强项，因此您可能需要对此进行调整。例如，如果第一个/最后一个可聚焦元素是无法工作的表单控件

另外，值得一提的是，屏幕阅读器不一定使用tab键来浏览页面，它们“箭头式”浏览（浏览模式），也不一定触发焦点。 为了将它们保持在iframe中，您需要有效地“隐藏”其他所有内容

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

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

当iframe成为焦点时：

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

这方面的所有技术（在灯箱的上下文中）都包含在这里的要点中：

---

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

更准确的标题可能是“在iframe中包含键盘焦点”？

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