Use Mousetrap in Gmail (website with many iframes?) #48

janmechtel opened this Issue Jul 25, 2012 · 10 comments


None yet
5 participants

I'm trying to add a custom shortcut in gmail through a chrome extension.

Without Mousetrap one can add a keydown in every iframe as described here:

This works fine. However if I use the same approach and do

Mousetrap.bind('4', function() { alert('343'); });

It's not working. I suspect this is because Mousetrap will only add the eventlistner to the toplevel document.

Any pointers?


ccampbell commented Jul 25, 2012

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) {

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.

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 commented Jul 25, 2012

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

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 commented Jul 27, 2012

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

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.

@janmechtel janmechtel closed this Jul 27, 2012


ccampbell commented Jul 27, 2012

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

jaylach commented Aug 12, 2012

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 commented Jul 9, 2014

👍 @ccampbell

My fork,, has this feature:

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

And then your combokeys instance is bound to that element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment