0

I dont know why this is so hard and there doesnt seem to be anything out there to do it already, that I could find.

All I want to do is open my web app in two (tabs/windows/iframes/whatever), but a different version in each. Then, when I interact with one version of the app it would send those mouse events to other version so I can see in real time how the responsiveness is different (if at all). Communicating from one tab to the other is no issue, I have that working, but when I try to dispatch the event in the second tab nothing happens no matter what I try.

Currently on the "slave" tab I have something like this:

        window.addEventListener("message", (event) => {
        if (event.data.clientX && event.data.clientY) {

        let d = event.data;
        
        document.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,

            clientX: d.clientX,
            clientY: d.clientY,
            detail: d.detail,
            screenX: d.screenX,
            screenY: d.screenY,
            button: d.button,
            ctrlKey : d.ctrlKey, 
            altKey : d.altKey, 
            shiftKey : d.shiftKey, 
            metaKey : d.metaKey
            
            }));
        }
    }, false);

I've tried it with just clientX/Y and then added these others but still no go. Everything seems to work its just that nothing happens with these dispatched events.

What am I missing? or is there already a tool to do this so I dont have to build something?

Greywire
  • 1,493
  • 4
  • 13
  • 14
  • I'm not sure but, maybe `document.elementFromPoint(x, y)` api could help you?. So something like `const element = document.elementFromPoint(clientX, clientY); element.click()` – radar155 Oct 31 '22 at 21:55
  • Well, the elementFromPoint does work, but I still cant fire an event on the found element. it wont let me call a click() on it but I tried elem.dispatchEvent() on it, but still nothing happens. I've seen examples of dispatchEvent working directly on a button and such but it doesnt work for me.. – Greywire Oct 31 '22 at 22:10
  • I'm not sure again but it could be a browser security limitation. Maybe you could try to communicate using the localstorage events, that I guess will overcome this limit. Take a look [here](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) – radar155 Oct 31 '22 at 22:16
  • Getting the information to the second tab/whatever (using an iframe) is not an issue, I've gotten that to work. Its just that inserting an event simply doesn't do anything. – Greywire Oct 31 '22 at 22:20
  • Yes I understood. I would give a try to localstorage apporach anyway. I'm asbolutely not sure but it's possible that the scope of the window event handler is limited by the browser in this situation. – radar155 Oct 31 '22 at 22:23
  • OK so it sort of works on some buttons and not others, I think its an issue more with angular not processing the events correctly or not rendering etc. – Greywire Oct 31 '22 at 22:32

0 Answers0