模态框内嵌跨域iframe时的Tab键焦点捕获问题求助

可行落地方案 #

方案1：哨兵元素法（优先推荐，支持跨域无需iframe侧改造） #

这是目前业界模态框焦点陷阱的通用实现方案，完全绕开跨域iframe无法调用focus()的限制，无需iframe侧配合改造。

实现步骤

1. 新增哨兵元素的全局样式，保证其可被键盘聚焦但视觉不可见、不干扰正常交互：

.focus-sentinel {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

2. 修改模态框DOM结构，在模态框内容的最开头和最末尾各插入一个哨兵元素：

<div class="modal">
  <!-- 开头哨兵 -->
  <span class="focus-sentinel" tabindex="0"></span>
  <!-- 原有模态框内容 -->
  <input type="text" />
  <iframe src="跨域地址"></iframe>
  <!-- 末尾哨兵 -->
  <span class="focus-sentinel" tabindex="0"></span>
</div>

3. 调整原有JS逻辑，通过哨兵的聚焦事件触发焦点循环：

var KEY = {
    TAB: 9,
  },
  // 选择器排除哨兵元素，取真实可聚焦元素
  allowedFocusableElements =
  'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]:not(.focus-sentinel), *[contenteditable]';

let dialogFirstRealElement, dialogLastRealElement;

function openDialog(e) {
  const dialog = document.querySelector('.modal'); // 替换为你的模态框选择器
  const startSentinel = dialog.querySelector('.focus-sentinel:first-child');
  const endSentinel = dialog.querySelector('.focus-sentinel:last-child');

  // 获取真实可聚焦元素列表
  const dialogFocusableElements = Array.from(dialog.querySelectorAll(allowedFocusableElements));
  dialogFirstRealElement = dialogFocusableElements[0];
  dialogLastRealElement = dialogFocusableElements[dialogFocusableElements.length - 1];

  // 哨兵聚焦时触发焦点循环
  startSentinel.addEventListener('focus', () => {
    dialogLastRealElement.focus();
  });
  endSentinel.addEventListener('focus', () => {
    dialogFirstRealElement.focus();
  });

  document.addEventListener("keydown", processKeys);
  // 打开模态框默认聚焦第一个真实元素即可
  dialogFirstRealElement.focus();
}

// 原有按键逻辑可保留也可删除，哨兵已经覆盖了焦点循环逻辑
function processKeys(event) {
  if (event.keyCode === KEY.TAB && !event.shiftKey) {
    if (document.activeElement === dialogLastRealElement) {
      event.preventDefault();
      dialogFirstRealElement.focus();
    }
  } else if (event.keyCode === KEY.TAB && event.shiftKey) {
    if (document.activeElement === dialogFirstRealElement) {
      event.preventDefault();
      dialogLastRealElement.focus();
    }
  }
}

原理说明

浏览器的Tab键跳转顺序由DOM节点顺序决定，跨域iframe的焦点行为父页面虽无法完全控制，但按Tab键从iframe中跳出后，必然会按顺序聚焦到下一个DOM节点也就是末尾哨兵，触发跳转逻辑回到第一个真实可聚焦元素；按Shift+Tab从iframe跳出时会聚焦到开头哨兵，触发跳转回到最后一个真实可聚焦元素，全程不需要对iframe调用focus()方法，完美适配跨域场景。 #

方案2：postMessage通信方案（仅适用于可控制iframe侧代码的场景） #

如果跨域iframe属于你方可控的业务域，可以通过父子页面通信实现焦点控制：

1. 父页面需要给iframe设置焦点时，通过postMessage向iframe发送焦点设置指令
2. iframe侧监听message事件，收到指令后调用内部的window.focus()方法主动聚焦
   该方案依赖iframe侧的代码改造，适用范围较窄。

内容的提问来源于stack exchange，提问作者Prestosaurus