javascript - Listen for mouse click and keypress events within iframe - Stack Overflow

admin管理员组

文章数量:1401470

I would like to add some explanations to each slide of an embedded swipe.to presentation. Therefore I am trying to count the times a button within the iframe is pressed or certain keystrokes are done. The goal is to determine on which slide the user is in order to display the appropriate slide explanation.

If the user clicks on the link with id #next or presses space bar or right arrow an integer should increment. If the user clicks on the link with id #previous or presses left arrow the integer should decrease.

Regarding the mouse click events this answer did help me a lot. It works like a charm. However I am still having a hard time getting the keypress events to work.

This is what I have got:

embedding code

<figure class="swipe">
   <iframe src="" allowfullscreen></iframe>
</figure>
<style>figure.swipe{display:block;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}figure.swipe iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}</style>

code for determining slide count

<script>
        $('body iframe').load(function(){
            var i = 0;
            $('body iframe').contents().find('#next').bind('click',function(e) {
                    i++;
                    alert(i);
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 32){
                        i++;
                        alert(i);
                    }
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 39){
                        i++;
                        alert(i);
                    }
            });

            $('body iframe').contents().find('#previous').bind('click',function(e) {
                    i--;
                    alert(i);
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 37){
                        i--;
                        alert(i);
                    }
            });


        });
</script>

I would like to add some explanations to each slide of an embedded swipe.to presentation. Therefore I am trying to count the times a button within the iframe is pressed or certain keystrokes are done. The goal is to determine on which slide the user is in order to display the appropriate slide explanation.

If the user clicks on the link with id #next or presses space bar or right arrow an integer should increment. If the user clicks on the link with id #previous or presses left arrow the integer should decrease.

Regarding the mouse click events this answer did help me a lot. It works like a charm. However I am still having a hard time getting the keypress events to work.

This is what I have got:

embedding code

<figure class="swipe">
   <iframe src="https://www.swipe.to/embed/0882x" allowfullscreen></iframe>
</figure>
<style>figure.swipe{display:block;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}figure.swipe iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}</style>

code for determining slide count

<script>
        $('body iframe').load(function(){
            var i = 0;
            $('body iframe').contents().find('#next').bind('click',function(e) {
                    i++;
                    alert(i);
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 32){
                        i++;
                        alert(i);
                    }
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 39){
                        i++;
                        alert(i);
                    }
            });

            $('body iframe').contents().find('#previous').bind('click',function(e) {
                    i--;
                    alert(i);
            });

            $('body iframe').contents().bind('keypress',function(e) {
                    if(e.keyCode == 37){
                        i--;
                        alert(i);
                    }
            });


        });
</script>

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited May 23, 2017 at 12:06 CommunityBot 111 silver badge asked Oct 12, 2014 at 10:33 NicoNico 16111 gold badge22 silver badges1212 bronze badges 2

• you can't access iFrame that is on different domain – charlietfl Commented Oct 12, 2014 at 11:54
• 1 But why does it work for clicks on the next/previous buttons? – Nico Commented Oct 12, 2014 at 12:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It is possible this way:

//left arrow
$(document.getElementById('frame-id').contentWindow.document).keydown(function(e){
                if(e.keyCode == 37){
                    i--;
                };
});

//right arrow and space bar
$(document.getElementById('test').contentWindow.document).keydown(function(e){
                if(e.keyCode == 32 || e.keyCode == 39){
                    i++;
                };
});

This should be embedded within $('body iframe').load(function(){ }

本文标签： javascriptListen for mouse click and keypress events within iframeStack Overflow