How can i simulate browser events using javascript

Question

I want to simuate the zoom In and zoom out events of browser using javascript. Like in MAC you use Command + to zoom and in Windows Control +. I want to show the same effect as these commands, so I thought of triggering these using vanilla javascript. But not able to achieve anything till now. Has anyone implemented it?

To simulate the event, I am creating the event of keydown with Command and = (zoomIn in case of Mac), but it is not triggering the zoom event :-

let e = new Event("keydown", {"bubbles": true, "cancelable": true});
  e.key = "=";    // just enter the char you want to send 
  e.keyCode = 187;
  e.which = e.keyCode;
  e.altKey = false;
  e.ctrlKey = false;
  e.shiftKey = false;
  e.metaKey = true;
  this.dispatchEvent(e);

To verify, I am listening for the zoom event, the manual browser zoom, and javascript zoom both are going inside the if statement.

document.addEventListener('keydown',function(e) {
  if (e.keyCode == 187 && e.metaKey) {
    console.log('this is getting triggered');
    //debugger;
    return true;
  }
});

I don't know if it's possible, but in the case it is, don't mess with users' settings. — Federico klez Culloca, Feb 05 '18 at 09:32
https://stackoverflow.com/a/19164758/839456 . You can change the zoom of the page manually by setting the `zoom` property, not by triggering the zoom key combo — anurupr, Feb 07 '18 at 06:08

QqQq · Answer 1 · 2018-02-05T09:59:04.573

You can try to emulate that behavior with CSS property transform: scale()

<!DOCTYPE html>
<html>
<head>
<style>
#test {
  margin: auto;
  border: 1px solid black;
  width: 200px;
  height: 100px;
  background-color: white;
  color: black;
}
</style>
<script>
  //TODO: Increase scale value by x each time you press button
  function zoomIn () {
    document.getElementById("test").style.transform = "scale(1.5)";
  }
  
  function zoomOut () {
    document.getElementById("test").style.transform = "scale(0.5)";
  }
</script>
<head>
<div id="test">
  <p>Test</p>
  <button onclick="zoomIn()">Zoom IN</button>
  <button onclick="zoomOut()">Zoom OUT</button>
</div>
<html>

How can i simulate browser events using javascript

1 Answers1