如何为页面的所有框架定义全局 onkeydown？答案

【问题标题】：How to define a global onkeydown for all frames of a page?如何为页面的所有框架定义全局 onkeydown？
【发布时间】：2019-04-18 13:56:26
【问题描述】：

我有一个非常复杂的旧版多框架页面，它必须与 IE-11 兼容并且需要响应热键事件。

不幸的是，我注意到我不能只在父页面中声明一个 JS 方法。相反，似乎每个框架都需要自己的 document.onkeydown() 方法，因为现在，事件仅在我单击定义了方法 onkeydown() 的框架时才起作用。

有没有办法全局定义这个方法，让所有框架都处理这个事件？我试图避免我必须为每个页面声明相同的方法（或相同的 JS 代码）的不舒服情况（这将是一场噩梦，因为框架是由一些 struts/spring mvc 规则路由的动态生成的页面）

【问题讨论】：

您可以将该代码放入可重复使用的文件中：)
或者，只要在父框架中检测到热键，您就会向嵌套的 iframe 发送 PostMessage，然后它们将调用您希望由同一热键触发的内部函数。
@Strelok 当然。但是我需要在框架可能调用的所有页面上添加对它的引用？
@Terry 我不认为它是这样工作的。如果在母版页中定义了 onkeydown，则在单击任何内部框架时都无法识别它。这种情况我想避免它触及所有的内框页面（多达40、60）
我没有说您必须删除子页面中的按键绑定。我提出的是一种父框架通知子框架事件的方法，如果子框架不在焦点上。

【解决方案1】：

我可以用两种方式解释这个问题，我认为两者/任何一个都可能有用，所以我会回答两个。

1) 如何在多个 HTML 框架之间共享代码（函数/方法/类*）？

在浏览器中并没有真正的正确方法来执行此操作，至少不是我认为您想要的方式。框架，被认为是一个遗留功能，自 90 年代以来并没有太大变化，那是在大型复杂的 JS 代码库出现之前。在不考虑浏览器扩展之类的情况下，没有一种本地方式可以“全局”定义函数。

这通常不是问题，因为执行此操作的典型方法是从通用脚本中绘制每一帧。您可以将脚本标签放在 HTML 页面的顶部（或底部）。

<script src='common-code.js'></script>

但是，如果您要问，我怎样才能在不更新每个框架的单独 HTML 的情况下让这个 JS 函数存在于每个框架中？那我怕你倒霉。这是每个框架如何被视为单独文档的一个特点，出于安全原因，您不能进入另一个文档并说“运行此代码”。

我会尝试找到一种方法来批量更新页面并添加一个包含或获取公共代码的脚本标签，或者如果已经定义了一些常见的 HTML，那么你可能会很幸运，你可以在那里添加它。

_{* 惊喜，在 JavaScript 中所有这些都是一回事！}

2) 如何将事件（keydown）从一帧传递到另一帧？

您可以使用Window 的postMessage 方法来模拟这一点，将消息从一个框架发送到另一个框架，然后接收框架将处理该消息，而不是本机事件。

无论您使用的是框架集还是 iframe，我相信您必须将每个事件向上传递给父级，然后父级将使用 window.frames 列表将事件发送回去。有点头疼，但有可能。

（要明确，这并没有解决第一个答案中讨论的限制。这就是您如何实现一个框架中的点击被另一个框架“处理”的情况 - 您仍然需要更新两个框架包括消息传递和处理代码）。

【讨论】：