跨域侦听 iframe 中的 keydown 事件答案

【问题标题】：Listen for keydown events in iframe with cross-domain跨域侦听 iframe 中的 keydown 事件
【发布时间】：2014-09-23 12:38:46
【问题描述】：

我想在 iframe 中侦听 keydown 事件以阻止退格键被执行。只要 iframe 中的页面来自同一个域，它就可以工作，但是当它来自另一个域时，它会在调用 contents() 方法时失败。

错误是：

IE：“0x80070005 - JavaScript 运行时错误：访问被拒绝。”

Chrome：“未捕获的安全错误：无法从 'HTMLIFrameElement' 读取 'contentDocument' 属性：阻止具有来源“domain_a”的框架访问具有来源“domain_b”的框架。协议、域，并且端口必须匹配。”

有什么方法可以监听来自另一个域的 iframe 上的 keydown 事件？

我使用这个 angularJS 代码来设置一个监听器：

KeyDownService.preFilterKeyDown($(this).contents());
...
angular.module('portal.services.keyHandlers.keyDownService', [])
.service('KeyDownService', function () {
    //Prevents shortcut keys (for instance backspace) in being executed in an iframe or document.
    this.preFilterKeyDown = function ($document) {
        $document.keydown(function (e) {
            var preventKeyPress;
            switch (e.keyCode) {
                case 8: //Backspace
                    preventKeyPress = preventBackspace(e);
                    break;
...
                default:
                    preventKeyPress = false;
            }

            if (preventKeyPress)
                e.preventDefault();
        });
    }

【问题讨论】：

标签： javascript angularjs iframe cross-domain

【解决方案1】：

没有。你不能这样做，它与 AngularJS 无关。这是一种安全违规行为，专门用于防止您将美国银行中的 IFRAME 插入您自己的网站并从该框架中窃取用户的凭据。

但是，如果您控制这两个页面，您可以让 IFRAME 自愿为您提供数据。 postMessage 是一种常用的技术：

http://caniuse.com/#search=postMessage

基本上，您将击键捕获在 IFRAME 中，然后将带有详细信息的消息发送回父级。浏览器允许这样做是因为它是自愿和合作的——你必须同时控制发送者和接收者，所以它不能在用户不知情的情况下被用来窃取用户的东西。

【讨论】：