Question

如果内部的iframe被聚焦，如何在按下箭头键时阻止html页面滚动？

我在chrome中获取此错误

iframe很专注，我知道它专注。无论如何父母都会滚动。

Answer 1

iframe文档中的以下代码将阻止它滚动：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

Answer 2

这除IE之外有效：

window.top.document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

Answer 3

这段代码可以解决问题：

<强>的JavaScript

<script type="text/javascript">
  function focusOnIframe(iFrameID) {
    if (frames[iFrameID]!=undefined)
      frames[iFrameID].focus(); // Works in all browser, except Firefox
    else
      document.getElementById(iFrameID).focus();  // Works in Firefox
  }
</script>

HTML（示例）

<input type="button" id="setfocus" value="Set focus" onclick="focusOnIframe('myiframe')" />

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

<iframe id="myiframe" src="yourpage.html"></iframe>

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

我在Firefox 3.6.6，Iron 5.0.380，Opera 10.60，IE 6和IE 8中测试过它。

Answer 4

对于无法访问加载到 iframe 的页面源的人的回答：

我解决了 scroll 事件传播到父元素（主 html 文档）的问题，方法是使用 CSS div 将整个页面分成 2 个 position:fixed，第一个带有整个 html 页面（父) 和第二个仅使用 iframe，例如将屏幕分成两半并在分屏上看到 2 个浏览器窗口。或更灵活的升级：使第一个 div 的 CSS width:100vw;height:100vh;（+ 微调 CSS top|left|bottom|right）和第二个 div 可通过 CSS resize（{{1 }}) 或任何更智能的 JS 代码（例如 jQueryUI）

Answer 5

您可以使用以下代码来防止使用箭头键滚动：

var objImage= null;

            function getKeyAndMove(e){

            var idtestor = document.getElementById('idPlacer2').value; 
                objImage=  document.getElementById(idtestor);               
                objImage.style.position='relative';


                var key_code=e.which||e.keyCode;
                switch(key_code){
                    case 37: //left arrow key
                        moveLeft();
e.preventDefault(); 
                        break;
                    case 38: //Up arrow key
                        moveUp();
e.preventDefault(); break;
                        break;
                    case 39: //right arrow key
                        moveRight();
e.preventDefault(); 
                        break;
                    case 40: //down arrow key
                        moveDown();
e.preventDefault(); break;
                        break;                      
                }
            }
            function moveLeft(){
                objImage.style.left=parseInt(objImage.style.left)-5 +'px';
window.scrollBy(-5, 0);
            }
            function moveUp(){
                objImage.style.top=parseInt(objImage.style.top)-5 +'px';
window.scrollBy(0, -5);
            }
            function moveRight(){
                objImage.style.left=parseInt(objImage.style.left)+5 +'px';
window.scrollBy(5, 0);
            }k`a`
            function moveDown(){
                objImage.style.top=parseInt(objImage.style.top)+5 +'px';
window.scrollBy(0, 5);
            }

防止用箭头键滚动

5 个答案: