Use Mousetrap in Gmail (website with many iframes?) about mousetrap

[ccampbell]

Yeah unfortunately this is a limitation right now. I designed the library to be really simple for the majority of use cases so it can only bind to the document. I'm not sure if there is a simple workaround right now. Might have to try another library 😒

If you don't mind editing mousetrap you can probably do something like adding a new public method around line 796

bindEventsTo: function(element) {
    _addEvent(element, 'keypress', _handleKey);
    _addEvent(element, 'keydown', _handleKey);
    _addEvent(element, 'keyup', _handleKey);
}

Then you could do something like

$("iframe").each(function(i, iframe) {
    Mousetrap.bindEventsTo(iframe.contentDocument);
});

This will get tricky though because the callbacks would get fired for each iframe so you would have to check in the callback that it is the one you are expecting.

[janmechtel]

OK, will try this soon thanks for the quick help. I don't understand your last comment

This will get tricky though because the callbacks would get fired for each iframe so you would have to check in the callback that it is the one you are expecting."

Do mean, that inside _handleKey I have to check and switch according to the "source iframe"? Do you assume I need to distinguish the source iframe or is there another reason.

My shortcut should be global, that means I don't care which iframe sent it originally.

[ccampbell]

You don't have to change _handleKey. What I meant is that your callback potentially could be fired multiple times, but I think I might be wrong cause only one iframe can have focus at a time so it might be fine. Let me know

[janmechtel]

Works like a charm, thanks!

And i think there is no double triggering. My callback (a test alert()) is triggered only once, then the event is scheduled only once, right?

Is there any other way for my to "append" the bindEventsTo to the mousetrap object from the "outside" so that I could use mousetrap.min.js (sorry I am a JS noob). Thx again.

[ccampbell]

Unfortunately not right now. I would have to add public access to _addEvent and _handleKey which I'm not crazy about doing.

If you want to minimize the new version yourself you can do it here http://closure-compiler.appspot.com/home

[janmechtel]

I was rather looking for away to making "subscribing" to your future
changes as convenient as possible. But maybe I should look into git
"forking". Thanks for all the help.

[ccampbell]

Ah yeah, you could definitely fork it and then merge in updates :)

[jaylach]

I just wanna chime in here (even though this is closed) and say thanks for this solution. I was fighting with MouseTrap to get it to bind keys on an iframe. I added your bindEventsTo method and it works wonderfully. Here's hoping you find a way to get something similar into a release so I'm not running a rogue version :P

[ts]

👍 @ccampbell

[mightyiam]

My fork, https://www.npmjs.org/package/combokeys, has this feature:

var combokeys = new Combokeys(document.getElementById("someIframeOrSomething"));

And then your combokeys instance is bound to that element.