将键盘和鼠标事件从一个浏览器选项卡发送到另一个

Question

所以，我有一个网页，打开另一个页面（浏览器选项卡）作为第一个孩子。 父选项卡包含执行应用程序大部分工作的代码。 子选项卡包含通常嵌入在父选项卡中的组件，但有时用户可能希望在其自己的选项卡中打开它。 他们可以。

问题是，子选项卡中的组件支持大约20种不同的键盘命令和许多与鼠标相关的命令（与带键盘命令的组合）。 我试图避免将子窗口中的每个键盘命令重新映射到父窗口中的调用。 现在，在父窗口中，我使用插件来映射和处理所有发送到正确的组件API调用的键盘命令。

我想要做的是，只需将子窗口中的键盘和鼠标事件传递回父窗口，这样就可以正常处理这些事件。 我不想在子窗口中为每个命令重新设置特定处理程序。 管道键/鼠标事件感觉更优雅，理想情况下，可以减少代码。

我尝试的第一件事是：

// CHILD WINDOW
window.document.addEventListener("keydown",  Redispatch, false);
function Redispatch(event){  
        window.opener.myRedirector.dispatchChildEvent(event);
 }

在父窗口中，它有：

myRedirector.dispatchChildEvent = function(event){
    var r = dispatchEvent(e);
    console.log('dispatched event from child window');
}

在这种情况下，没有任何反应。 父窗口中的console.log（）函数永远不会触发，并且单步执行它， console.log（）行永远不会被触发。 dispatchEvent（e）调用表现为发生错误，但没有抛出任何内容（这是最新的Chrome）。

所以我尝试在父类中实例化一个新事件（从另一个StackOverflow文章中看到）：

myRedirector.dispatchChildEvent = function(e){
    var event  = document.createEvent('KeyboardEvent');
    var method = typeof event.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

    event[method](
        /* type         */ e.type,
        /* bubbles      */ true,
        /* cancelable   */ false,
        /* view         */ window,
        /* keyIdentifier*/ e.keyIdentifier,
        /* keyLocation  */ e.location,
        /* ctrlKey      */ e.ctrlKey,
        /* altKey       */ e.altKey,
        /* shiftKey     */ e.shiftKey,
        /* metaKey      */ e.metaKey,
        /* altGraphKey  */ false
  );
}

这里的问题是，这不会初始化事件的所有属性，如keyCode和哪些 。 我使用的键盘处理程序插件不读取keyIdentifier ，它使用keyCode 。 我无法手动设置keyCode，因为它只是对象的readonly。 我想改变插件来读取keyIdentifier ，但是这个值不是整数，它是一个像“U + 005”等的Unicode字符串，我不想将所有的keyCodes重新映射到插件中的那些值（虽然这可能是Chrome特定的）。

所以我也试过实例化一个CustomEvent，只是添加属性，这几乎起作用。 除了CustomEvent有一个type属性设置为空字符串，并且不能被覆盖，所以插件不会捕获它，因为它不是'keydown'类型等。

我一直觉得我错过了一些应该让这成为可能的东西。 这就是为什么我避免使用其他解决方案，如重新映射值，或在子窗口中设置所有新处理程序等。

感觉应该可以将键盘/鼠标事件管道传输到父窗口。 不过到目前为止，我似乎找不到办法。

有什么建议或解决方案吗？

Answer 1

所以，我使用的是document.createEvent（），它产生的事件对象已经添加了太多属性（只读）。 所以当我这样做时：

var event = new Event(childEvent.type);

这创建了一个正确类型的事件，但没有keyCode或keyIdentifier或其他此类属性，我可以从childEvent动态添加它们。 然后，派遣他们工作正常。