CODEWITHSUNDEEP
javascript
Tom
Tom

Reputation: 6707

Pressing space on iframe scrolls parent page down, how to prevent that without breaking keyup event

My iframe game is reading the keyboard including space, but on some browsers (Firefox, Safari) pressing Space also scrolls my page down, that causes my game to partially go out of screen. Sometimes it seems the page even scrolls back up when some other keys are pressed...

My game handles keypresses on "keyup" event.

input.addEventListener("keyup", function (e) {
//game handles all keys including space here
}

Because of using keyup event, this answer is not suitable to prevent space ; Pressing spacebar scrolls page down?

If I add this code, my game does not receive keyup events:

window.onkeydown = function(e) { 
  return !(e.keyCode == 32);
};

When I add this code above to parent html page, having ifreme, it only works if keyboard focus is clicked to parent html. When focus is inside iframe, the code does not work. It seems above code fixed issue for Safari!

Upvotes: 0

Views: 804

Answers (3)

Erick2280
Erick2280

Reputation: 300

The onkeypress event fires the browser scrolling. You can call preventDefault in this event, and the keyup and keydown events will continue to fire as intended.

window.onkeypress = function(e) { 
    if (e.keyCode == 32) {
        e.preventDefault();
    }
};

window.onkeyup = function(e) { 
  console.log("Space key up!")
};

Upvotes: 1

Dominique Fortin
Dominique Fortin

Reputation: 2238

You have to find the right window object first

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);

and then add the listeners to stop the spacebar event from bubbling up.

if (frame_win) {

  var preventSpace = (e) => {
      if (e.keyCode === 32) {
        e.preventDefault();
      }
    };

  frame_win.addEventListener('keydown', preventSpace);
  frame_win.addEventListener('keyup', preventSpace);
  frame_win.addEventListener('keypress', preventSpace);
}

Upvotes: 1

xurei
xurei

Reputation: 1086

You need preventDefault

window.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    e.preventDefault();
  }
});

See this codepen for a demo: https://codepen.io/xurei/pen/MWyveEp

Upvotes: 1

Related Questions