无法从按键上的 iframe 失去焦点答案

【问题标题】：Unable to lose focus from an iframe on keypress无法从按键上的 iframe 失去焦点
【发布时间】：2014-02-20 13:03:57
【问题描述】：

我的 html 页面中有一个 iframe。我在我的 html 文档中附加了关键事件。

当我按下“a”或“z”时，我可以执行 addClass 或 removeClass 之类的操作。

因此，当我尝试将焦点添加到 iframe 时，它会在该块中添加。但是对于一个关键事件，我不能失去焦点（模糊）一个 iframe。

这里是示例代码：

    switch (myKey) {
        case 'a':
            $('div').append("<p>a pressed</p>");
            $("iframe").addClass("thick");
            $("iframe").focus();
            break;
        case 'z':
            $('div').append("<p>z pressed</p>");
            $("iframe").removeClass("thick");
            $("iframe").blur();
            break;
        default:
            //console.log('keycode', keycode);
    }

谁能帮我告诉我哪里错了？

小提琴 - http://jsfiddle.net/hgXyq/70/

【问题讨论】：

它的工作见jsfiddle.net/hgXyq/71
为什么要设置焦点和模糊。删除并查看。
您的问题是什么？预期的行为是什么？没看懂
在我的小提琴中，$("iframe").blur() 没有发生。当我按下z 时，我想让我的 iframe 失去焦点

标签： javascript jquery iframe keyboard key-events

【解决方案1】：

您正在更改活动的 DOM。您需要添加额外的代码以使其也可以在 iframe 上运行（或返回文档）。只是我添加了这一行，它对我有用。但是，您可以将其更改为其他内容以返回文档。

...
$(document).on('keydown keyup keypress', documentKeys);
$('iframe').on('keydown keyup keypress', documentKeys); //This line was added

【讨论】：

【解决方案2】：

由于您的焦点位于 iframe 中，因此您的按键最终将位于 iframe 中。您的父网页不会知道按键。因此，您必须在 iframe 中设置“z”侦听器，然后告诉父网页移除焦点。

当您的 iframe 获得按键时，您应该使用 html5 postMessage 在 iframe 和父级之间进行通信（iframe 告诉父级移除焦点）。当不支持 postMessage 时，还有一些 jquery 插件将使用不同的回退技术。

【讨论】：

【解决方案3】：

您的示例适用于 Firefox，但不适用于 Chrome。这是因为 Chrome 不支持某些元素上的某些事件。更多在这里： http://www.quirksmode.org/dom/events/blurfocus.html

为了避免将代码放在 iframe 子页面上，尤其是因为您的页面是 PDF :))，我们只需要向父页面添加另一个侦听器。

在$(document).on() 事件下添加这一行

$($("iframe").get(0).contentWindow.document).keypress(documentKeys);

注意：这适用于所有浏览器，但是您的 iFrame（子）页面和父页面必须在同一个域中。因此，要正确测试它，只需在 Localhost（或直接在您的服务器上）运行它

JsFiddle 在这里：http://jsfiddle.net/pw8qb/3/

希望这会有所帮助！

【讨论】：

【解决方案4】：

当您将焦点设置为 iframe 时，父框架会失去控制。子框架接管。

尝试处理子框架上的“z”键按下并将焦点设置回父框架。

【讨论】：

【解决方案5】：

很简单，如果页面是外部，这是不可能的。

但是他们是一个失去焦点的技巧，它不是那么好！

当我在这里阅读所有其他帖子时，

您的代码适用于某些浏览器，但不适用于 chrome ！

所以这个技巧只适用于那些类型的浏览器，

如果这种情况发生在我身上，那么我使用：

setInterval / setTimeout ：从 iframe 自动失去焦点，如果用户连续按 up arrow 或 down arrow（但不按 z）读取 PDF 然后再次焦点设置为 iframe 并等待不按 up arrow 或 down arrow ！使用间隔，所以每次焦点都在iframe 上，然后只设置一个特定的时间，之后它就会失去焦点！如果用户想再次阅读，请再次设置特定时间的焦点！

我不知道我的技巧是否对你完全有效，但通过使用setInterval / setTimeout，你可能有一些解决方案来解决这个问题！

另一个技巧是，让你的 iframe Internal：

这是通过将您的链接内容（您在 iframe 上设置的，如此处.pdf）放入blob() 并使用url.createobjecturl(blob) 并将其设置为iframe source！

现在iframe 由您控制，如果您能够将blob() 设置为iframe src，则可以实现您想要添加/删除的任何事件。

EXAMPLE

这只是完成这个可怕的任务的坏方法！！

这对你有点帮助...

【讨论】：