在帧上设置事件侦听器时的竞争条件答案

【问题标题】：Race condition when setting even listener on frames在帧上设置事件侦听器时的竞争条件
【发布时间】：2018-09-27 01:39:28
【问题描述】：

我试图在一个由框架组成的页面上设置一个全局键盘事件侦听器，但当我过早开始输入时会出现奇怪的行为。

主页面如下所示：

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>My title</title>
   </head>
   <frameset rows="*" cols="250,*" framespacing="3" frameborder="yes" border="1" class="doc-result-frameset">
       <frame src="left.html" name="info" id="info" scrolling="auto" class="doc-result-frame-info">
       <frame src="right.html" name="doc" id="doc" class="doc-result-frame-doc">
   </frameset>
   <noframes>&lt;body&gt;&lt;/body&gt;</noframes>
</html>

右框架是一个页面，加载时间比左框架长得多。左边的框架是我尝试添加一些 javascript 来控制整个页面的地方。

我写了以下内容：

top.window.addEventListener("keydown",
   function(event: KeyboardEvent) {handleKeyboardEvent(event, previous, next);},
   true);
var topWindowFrames : Window = top.window.frames;
for (var i = 0; i < topWindowFrames.length; i ++) {
   var frame : Window = topWindowFrames[i];
   frame.onload = (function(frame: Window) {
      return function() {
         frame.document.addEventListener("keydown",
            function(event: KeyboardEvent) {handleKeyboardEvent(event, previous, next);},
            true);};
         })(frame);   
}

我也尝试过不将frame.onload 包装在另一个函数中，只在代码中使用frame。

我遇到的问题是，如果我重新加载页面，并很快单击右框架以使其获得焦点并开始输入，那么左框架的事件侦听器将永远无法工作。相反，如果我等到所有内容都加载完毕再开始输入或点击，一切正常。

我不知道出了什么问题，因为我似乎无法找到一种方法来检查为每个帧注册了哪些侦听器。

【问题讨论】：

标签： javascript html listener frame

【解决方案1】：

通过body.onLoad触发事件监听器的绑定

<body onLoad="bindEvents()">

【讨论】：

感谢您的回答。我会试试这个。我已经在$(document).ready() 子句中执行了这段代码。你认为这会有所作为吗？