包含 iframe 的页面中的选项卡（键盘）导航答案

【问题标题】：Tab (keyboard) navigation in a page which contains iframe包含 iframe 的页面中的选项卡（键盘）导航
【发布时间】：2020-08-16 06:33:33
【问题描述】：

我有一个带有 iframe 的页面。 iframe 包含输入元素。当用户将光标放在 iframe 中的第一个输入文本框并按下 tab 键时，焦点从 iframe 中跳出，父页面中的下一个元素获得焦点。（而不是保留在 iframe 中，并将焦点放在第二个输入元素上。）

我尝试为输入元素放置 tabIndex 属性，但没有任何效果。

我想确保可以通过按 Tab 键访问 iframe 中的输入元素。

* 开始编辑冒着风险，但我必须分享我的意见...... 我认识到回答这个问题并不明显。关于这种行为的 UX 后果：看到浏览器和 html/css，我们仍然有这些白洞，它们将我们传送到 UI/IX 的石器时代：80 年代和早期90年代... 只需将自己置于最终用户的境地，他们会尝试使用 Tab 键在 UI 元素之间导航…… 结束编辑 *

...对不起，如果有人因为在 HTML 6+ 时代对此没有明显的答案而感到被冒犯...我认为我们应该解决或解决这个问题以确保最终用户的 UX...。或者不是这可重现？如果我遗漏了什么，请告诉我。

【问题讨论】：

我认为你不能这样做（我希望我错了），因为你无法控制 iframe 中的内容。使用选项卡，您只需在元素（您的 html）之间进行交互。无论如何，我会关注这个问题，因为如果我错了可能会很好
@Alvaro Menéndez：我不敢相信在带有标签的 iframe 中导航是不可能的。我不想改变任何“正常”行为：
什么是父页面？那也是你的吗？
stackoverflow.com/questions/6815836/… 的可能重复项也许您可以在那里找到答案？
@Olga：是的，我已经读过之前我问了我的问题。 1）在那里检查为“答案”的答案甚至没有提到 iframe。 2）我在我的问题中写道，我实际上尝试使用 tabindex 没有帮助。 3）“阅读您的浏览器文档”之类的答案（也可以在您的链接之后找到）也不合适，因为我们（您和我的）最终用户不应该阅读浏览器文档来浏览带有标签的输入元素，因为她/他在过去的 25 年里已经习惯了……

标签： html css iframe

【解决方案1】：

请考虑这个与您的主张相矛盾的简单示例。 Tab 可以在子框架和父框架的表单元素中正常导航。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outer Frame</title>
    <style>
        .iframe-wrapper {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="iframe-wrapper">
        <iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <input type="button" value="No, press me!">
</body>
</html>

还有inner-frame.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inner Frame</title>
    <style>
        .wrapper {
            border: 2px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>Hello, world. I am iframe.</div>
        <input type="text" name="" id="" value="Write in me">
        <input type="button" value="Press me">
    </div>
</body>
</html>

在 Windows 上使用 Chrome、Firefox 和 IE 进行测试 - 所有最新版本。

我还制作了一个 JS fiddle 来演示它。但是由于某些原因要渲染 iframe，您需要先按运行。 http://jsfiddle.net/zecu3yvn/

【讨论】：

感谢您的演示。现在我正在尝试隔离和重现我的情况，其中选项卡导航肯定不起作用，而是按照我在问题中描述的那样工作。然而，这是一个非常复杂的页面，包含 bootstrap、jquery 和一些插件......