oneko.js
oneko.js copied to clipboard
doesn't detect movement on iframes
see:
https://github.com/user-attachments/assets/c742a8c9-f9b9-4f3c-bed9-a6b248012154
mousemove events aren't dispatched when hovering over an iframe in any browser, this is an intentional security decision made by browser implementers.
If the user isn't using the mouse to interact with the iframe (e.g. it's just static content), the easiest solution is to set pointer-events: none in CSS. If you expect the user to actually click things inside the iframe you'll need to take a different approach, this StackOverflow question has a few possibilities.
there are buttons. yep. even whole games. gonna look at it. maybe it will be possible to enable it only of few subsites…
I added a functionality like this for my site recently after finding out about oneko.js (frankly, I fell in love with it). It did require a bit of tweaking here and there but, in a nutshell, this is how I did it:
In each iframe I have on my site, I added a script that sends these messages to the element.
iframe.js
document.addEventListener("mousemove", (e) => {
const rect = window.frameElement.getBoundingClientRect();
window.parent.postMessage({
type: "mousemove",
x: e.clientX + rect.left,
y: e.clientY + rect.top
}, "*");
});
Now, around after appending the nekoEl element to the document and adding a "mousemove" event listener, I added another event listener, but this time to the message that I made above
oneko.js
window.addEventListener("message", (event) => {
if (event.data && event.data.type === "mousemove") {
mousePosX = event.data.x;
mousePosY = event.data.y;
}
});
I wish there was a way to pin @nostalgiawitness's answer. Gonna close this issue as I don't plan on adding this to the main codebase.