Question

我的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/

Answer 1

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

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

Answer 2

由于您的重点是iframe，因此您的按键将以iframe结束。您的父网页将不知道按键。因此，您必须在iframe中拥有“z”侦听器，然后告诉父网页删除焦点。

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

Answer 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/

希望这有帮助！

Answer 4

将焦点设置为iframe时，父框架失去控制权。儿童框架接管。

尝试按下'z'键按下子帧并将焦点设置回父帧。

Answer 5

简单地说，如果页面外部，则不可能。

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

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

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

所以这个技巧只针对那些类型的浏览器，

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

setInterval / setTimeout ：要自动从iframe中失去焦点，并且如果用户持续按up arrow或down arrow（但不按z）以阅读{ {1}}然后再次将焦点设置为iframe并等待不按PDF或up arrow！使用Interval，所以每次焦点都在down arrow时，只会在特定时间内设置，之后就会失去焦点！如果用户想再次阅读，请再次将焦点设置为特定时间！

我不知道我的诀窍是否完全有效，但对于你而言，使用iframe你可能有一些解决方案来解决这个问题！

另一个诀窍是，使您的iframe 内部：

完成后，将您的链接内容（您在iframe上设置，例如此处setInterval / setTimeout）添加到.pdf并使用blob()并将其设置为url.createobjecturl(blob) ！

现在，iframe source已受到您的控制，如果您能够将iframe设置为blob()，则可以实现您要添加/删除的事件。

EXAMPLE

这只是实现这个可怕任务的不好方法 !!

这对你有所帮助......

无法在按键上失去iframe的焦点

5 个答案:

简单地说，如果页面外部，则不可能。