Сделать родительские элементы DOM нечитаемыми

Question

Я делаю свой IFrame полноэкранным, я хочу сделать DOM Elements в Parent disable [on tabbing] с помощью javascript. Есть идеи?

заранее спасибо

Answer 1

Я думаю, что сценарий очень похож на контент поп-кадром (лайтбоксы), где вы хотите его:

• Перемещение клавиатуры фокус в верхней части фрейма.
• Держите фокус клавиатуры в 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 становится focus:

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

Все методы для этого (в контексте лайтбокса) находятся в а именно: https://gist.github.com/alastc/7340946

NB: Вся концепция полноэкранного просмотра iframe звучит немного сомнительно, если вы предоставили какой-то контекст, может быть лучшее решение?