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

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

i add together explanations each slide of embedded swipe.to presentation. hence trying count times button within iframe pressed or keystrokes done. goal determine on slide user in order display appropriate slide explanation.

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

regarding mouse click events answer did help me lot. works charm. still having hard time getting keypress events work.

this 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 determining slide count

<script> $('body iframe').load(function(){ var = 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 possible way:

//left arrow $(document.getelementbyid('frame-id').contentwindow.document).keydown(function(e){ if(e.keycode == 37){ i--; }; }); //right arrow , space bar $(document.getelementbyid('test').contentwindow.document).keydown(function(e){ if(e.keycode == 32 || e.keycode == 39){ i++; }; });

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

javascript jquery html iframe