Aufblasen von Mausereignissen außerhalb eines IFrames [Duplikat] ⇐ HTML

[Guest]

Ich habe einen transparenten IFrame, der die gesamte Seite abdeckt (stellen Sie sich einen IFrame über Google Maps vor). Der IFrame verfügt über einige UI-Elemente (z. B. Menüs), daher möchte ich in der Lage sein, Mausereignisse innerhalb des IFrames zu verarbeiten, um mit den Menüs zu interagieren, aber ich möchte sie in das übergeordnete Fenster übertragen, wenn die Ereignisse nicht von verarbeitet werden die IFrame-Benutzeroberfläche.
Ich kann Ereignisse mithilfe von Nachrichten erfolgreich an das übergeordnete Element übergeben. Ich kann die Ereignisse auch mit „dispatchEvent“ auslösen, allerdings verhalten sich einige UI-Elemente auf der Seite nicht wie erwartet. Beispielsweise kann der Text nicht ausgewählt werden, die Textbox erhält nicht den Fokus, die Schaltfläche wird nicht visuell angeklickt (obwohl sie das Click-Ereignis erhält).
Versuche ich, etwas Unmögliches zu tun? Gibt es eine Möglichkeit, Ereignisse „echt“ auszulösen, als wären sie durch Benutzeraktionen verursacht worden?
Hier ist die Hauptseite:
< div class="snippet">

Code: Select all

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));
});

Code: Select all

Click

Some text

iframe.html
  

Hier ist der IFrame:

Code: Select all

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
}

Code: Select all