在带有框架的html页面中捕获keydown事件

时间:2011-01-06 08:57:00

标签: javascript html keydown

我有一个带框架的jsp页面

<%@ include file="/includes/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
  <title>Welcome</title>
    <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(this).keydown(function(e) {
                if(e.keyCode==27){
                    alert("escape pressed");
                    e.preventDefault();
                }
          });       
        }   
        );  
      </script> 
  </head>
      <frameset rows="42,*" frameborder="0" framespacing="0" id="framest">
          <frame src="/xyz/abc.html" scrolling="no" name="frame1"/>
          <frame src="/xyz/init.html" scrolling="no" name="frame2"/>
      </frameset>
</html>

我正在尝试捕获转义按键。但这似乎不起作用。在每个单独的帧html上如果我写相同的捕获代码,它的工作完全正常。

我应该在上面的代码中进行哪些更改,以便我只编写一次keydown代码,这使我能够在任何帧的页面上的任何位置捕获keydown。

2 个答案:

答案 0 :(得分:4)

请记住,框架是一个全新的HTML页面,其中包含一个完整的独立DOM,因此jQuery不会在绑定中包含它。

因此您还需要绑定到这些文档:

function keyDownHandler(e) {
    if(e.keyCode==27){
        alert("escape pressed");
        e.preventDefault();
    }
}

for (var id in window.parent.frames)
    $(window.parent.frames[id].document).keydown(keyDownHandler);
$(document).keydown(keyDownHandler);

如果上述内容因id

而无法使用
for (var i = 0; i < window.parent.frames.length; i ++) {
   var frame = window.parent.frames[i].document;
   frame.addEventListener("keydown",keyDownHandler, true);
}

如果要引用所有帧,请从顶层

for (var i = 0; i < top.window.frames.length; i ++) {
   var frame = top.window.frames[i].document;
   frame.addEventListener("keydown",keyDownHandler, true);
}

答案 1 :(得分:2)

你也可以试试这个:

将代码写入.js文件并在所有框架中包含文件。这样你就必须只写函数onces,你可以在所有帧中调用它。

希望这一点。