Всплывание событий мыши за пределами IFrame ⇐ Html

[Anonymous]

У меня есть прозрачный IFrame, который покрывает всю страницу (представьте себе IFrame поверх Google Maps). IFrame имеет некоторые элементы пользовательского интерфейса (например, меню), поэтому я хотел бы иметь возможность обрабатывать события мыши внутри IFrame, чтобы взаимодействовать с меню, но я хочу перенести их в родительское окно, если события не обрабатывались пользовательский интерфейс IFrame.
Я могу успешно передавать события родительскому элементу с помощью обмена сообщениями. Я также могу инициировать события с помощью sendEvent, однако некоторые элементы пользовательского интерфейса на странице ведут себя не так, как ожидалось. Например, невозможно выделить текст, текстовое поле не получает фокуса, кнопка не нажимается визуально (хотя она и получает событие click).
Я пытаюсь сделать что-то невозможное? Есть ли способ инициировать события «по-настоящему», как если бы они были вызваны действиями пользователя?
Вот его главная страница:
< div class="snippet">

Код: Выделить всё

window.addEventListener('message', (event) => {

let mouseEvent = new MouseEvent(event.type, event.data);
let elements = document.elementsFromPoint(mouseEvent.x, mouseEvent.y);
if (elements.length < 2) return;

let element = elements[1];
mouseEvent.currentTarget = element;
mouseEvent.target = element;

element.dispatchEvent(new MouseEvent(event.data.type, event));
});

Код: Выделить всё

Click

Some text

iframe.html
  

Вот IFrame:

Код: Выделить всё

document.onmousedown = bubleUp;
document.onmouseenter = bubleUp;
document.onmouseleave = bubleUp;
document.onmousemove = bubleUp;
document.onmouseout = bubleUp;
document.onmouseover = bubleUp;
document.onmouseup = bubleUp;
document.ondblclick = bubleUp;
document.oncontextmenu = bubleUp;
document.onclick = bubleUp;

function bubleUp (event)
{
let pojo = {};

// Strip off all the props that can't be serializaed into a mesasge
for (let key in event)
{
let value = event[key];
if (value instanceof Window || value instanceof Node || value instanceof InputDeviceCapabilities || typeof value === 'function')
continue;

pojo[key] = value;
}

sendMessageToParent(pojo);
}

function sendMessageToParent(data) {
window.parent.postMessage(data, '*'); // Send message to parent window
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... -an-iframe