使父DOM元素無法讀取

Question

我讓我的IFrame成爲全屏，我想讓父元素中的DOM元素禁用[使用javascript的tabbing]。任何想法？

在此先感謝

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聽起來有點可疑，如果你提供一些背景有可能是一個更好的解決方案的整個概念？