我正在使我的IFrame成为全屏,我想使用javascript在父禁用[on tabbing]中制作DOM元素。有什么想法吗?
提前致谢
答案 0 :(得分:1)
我认为这个场景非常类似于内容弹出式窗口(灯箱),您可以将其用于:
要将键盘焦点移动到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的整个概念听起来有点可疑,如果你提供了一些上下文,可能会有更好的解决方案吗?