Перенаправьте событие keydown из родительского окна в iframe, содержащий reveal.JS



Я реализовал HTML-страницу, которая обертывает некоторые дополнительные функции вокруг iframe. Iframe содержит откровение.презентация js. Всякий раз, когда клавиша на клавиатуре нажата и в Родительском фрейме (не кадра) в центре внимания, я хочу передать событие в окне iframe (например, стрелка вправо нажата (родитель сосредоточен) --> стрелка вправо выполняется в iframe, как если бы он был сосредоточен - в итоге перехода к следующему слайду).



Я отвечаю за оба фрейма, и в конечном итоге они будут размещены в тот же домен. В целях развития я запустил браузер с отключенными функциями безопасности.



Я попробовал несколько методов на основе JQuery, таких как



$(document).keydown((event) => {
var e = jQuery.Event( "keydown", { keyCode: event.keyCode } );
$('#revealPresentation')[0].contentWindow.$('body').trigger(e);
});


И не смог заставить их работать. Я вернулся к простым методам JS:

$(document).keydown((event) => {
var newEvent = new KeyboardEvent("keydown", {
key: event.originalEvent.key, code: event.originalEvent.code,
charCode: event.originalEvent.charCode, keyCode: event.originalEvent.keyCode,
which: event.originalEvent.which
});
document.getElementById("revealPresentation")
.contentWindow.document.dispatchEvent(newEvent);
});


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



Решение:
Согласно этому сообщению WebKit имеет ошибку, которая в конечном итоге не заполнит свойство keyCode вновь созданного KeyboardEvent. Именно это свойство и оценивается в reveal.js для того, чтобы вызвать некоторые действия (например, следующий слайд). Мне удалось осуществить одну обходной путь (код был предложен в упомянутом посте):



document.addEventListener('keydown', (e) => {
let frame = document.getElementById('revealPresentation').contentDocument;
let newEvent = new Event('keydown', {key: e.key, code: e.code, composed: true, charCode: e.charCode, keyCode: e.keyCode, which: e.which, bubbles: true, cancelable: true, which: e.keyCode});
newEvent.keyCode = e.keyCode;
newEvent.which = e.keyCode;
frame.dispatchEvent(newEvent);
});
794   1  

1 ответ:

Это странно, ваш код не кажется мне чем-то неправильным. Я также протестировал его на простом javascript, и все просто отлично работало.

Пример: https://jsfiddle.net/d7ap1ntz/

Слушатель в Родительском фрейме

document.addEventListener('keydown', e => {
  const frame = /*your iframe element*/;

  // dispatch a new event
  frame.contentDocument.dispatchEvent(
    new KeyboardEvent('keydown', {key: e.key})
  );
})

Слушатель в iframe

document.addEventListener('keydown', e => {
  console.log('keydown in iframe: ' + e.key)
})

Может ли это быть вызвано слушателем в вашем iframe?

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

Comments

    Ничего не найдено.