監聽iframe中的鼠標點擊和按鍵事件

Question

我想爲嵌入的swipe.to演示文稿的每張幻燈片添加一些說明。 因此，我試圖計算iframe中的按鈕被按下或某些擊鍵完成的次數。目標是確定用戶在哪張幻燈片上顯示相應的幻燈片說明。

如果用戶點擊ID爲#next的鏈接或按空格鍵或向右箭頭，則整數應遞增。如果用戶點擊ID爲#previous的鏈接或按下左箭頭，整數應該減少。

關於鼠標點擊事件，這個answer幫了我很多。它像一個魅力。不過，我仍然很難讓按鍵事件起作用。

這是我有：

嵌入代碼

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

確定幻燈片計數代碼

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

Answer 1

很可能是這樣的：

//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++; 
       }; 
}); 

這應該被嵌入$('body iframe').load(function(){ }