Отправка событий клавиатуры и мыши с одной вкладки браузера на другую

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).

Поэтому я попытался создать новое событие в родительском объекте следующим образом (видно из другого поста Stackru):

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 и which. Плагин обработчика клавиатуры, который я использую, не читает keyIdentifier, он использует keyCode. Я не могу вручную установить keyCode, потому что он доступен только для объекта. Я думал об изменении плагина для чтения keyIdentifier, но это значение не является целым числом, это строка Unicode, такая как "U+005" и т. Д., И я не хочу переназначать все коды ключей в эти значения в плагине (хотя это может быть специфично для Chrome).

Поэтому я также попытался создать экземпляр CustomEvent и просто добавить к нему свойства, что почти сработало. За исключением того, что CustomEvent имеет свойство типа, которое установлено в пустую строку и не может быть переопределено, поэтому плагин не перехватывает его, так как он не имеет типа "keydown" и т. Д.

Я продолжаю чувствовать, что упускаю что-то, что должно сделать это возможным. Вот почему я избегал других решений, таких как переназначение значений или настройка всех новых обработчиков в дочернем окне и т. Д.

Такое ощущение, что должна быть возможность просто передавать события клавиатуры / мыши в родительское окно. Пока, однако, я не могу найти способ.

Любые предложения или решения?

Answer 1

Итак, я использовал document.createEvent(), и это создавало объект события с уже добавленными слишком многими свойствами (которые были доступны только для чтения). Итак, когда я сделал это:

var event = new Event(childEvent.type);

Это создало событие правильного типа, но без keyCode или keyIdentifier, или других подобных свойств, и я мог бы просто добавить их динамически из childEvent. Затем отправка их работала нормально.