在iframe中监听鼠标点击和按键事件 [英] Listen for mouse click and keypress events within iframe

问题描述

我想为嵌入式 swipe.to 演示文稿的每张幻灯片添加一些解释。
因此，我正在尝试计算iframe中的按钮被按下或某些击键完成的时间。我们的目标是确定用户在哪一张幻灯片上显示合适的幻灯片说明。

如果用户点击ID ＃下一步或按空格键或右箭头整数应增加。如果用户点击id #previous 的链接或按下左箭头，整数应该减少。

关于鼠标点击事件，这个答案确实帮了我很大忙。它像一个魅力。然而，我仍然很难得到按键事件的工作。

这是我得到的：

嵌入代码

 < figure class =swipe> 
< iframe src =https://www.swipe.to/embed/0882xallowfullscreen>< / 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;宽度：100％;高度：100％;边界：无;}< /风格> 
  

确定幻灯片计数的代码

 < script> 
 $（'body iframe'）。load（function（）{
 var i = 0; 
 $（'body iframe'）。contents（）。find（'＃next'） .bind（'click'，function（e）{
 i ++; 
 alert（i）; 
}）; 
 
 $（'body iframe'）。 （e.keyCode == 32）{
 i ++; 
 alert（i）; 
} $（
 $） （'keypress'，function（e）{
 if（e.keyCode == 39）b $ b}）; 
 
 $（'body iframe'）。contents {
 i ++; 
 alert（i）; 
} 
}）; 
 
 $（'body iframe'）。contents（）。find ''点击'，函数（e）{
 i--; 
 alert（i）; 
}）; 
 
 $ （BOD （if）'）。contents（）。bind（'keypress'，function（e）{
 if（e.keyCode == 37）{
 i--; 
 alert（i）; 
} 
}）; 
 
 
}）; 
< / script> 
  

解决方案

可以这样做：

  // left arrow 
 $（document.getElementById（'frame-id'）。contentWindow.document）.keydown（function（e ）{
 if（e.keyCode == 37）{
 i--; 
}; 
}）; 
 
 //右箭头和空格键
 $（document.getElementById（'test'）。contentWindow.document）.keydown（function（e）{
 if（e。 keyCode == 32 || e.keyCode == 39）{
 i ++; 
}; 
}）; 
  

这应该嵌入 $（'body iframe'）。load function（）{}

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>

解决方案

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

这篇关于在iframe中监听鼠标点击和按键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！