我如何使用JavaScript模拟浏览器事件

Question

我想使用JavaScript模拟浏览器的放大和缩小事件。 就像在MAC中一样，您可以使用Command +进行缩放，而在Windows Control + 。 我希望显示与这些命令相同的效果，因此我想到了使用普通javascript触发这些命令的功能。 但直到现在仍无能为力。 有人实施过吗？

为了模拟事件，我使用Command和=（在Mac中为zoomIn）创建keydown事件，但未触发zoom事件：-

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

为了验证，我正在监听zoom事件，手动浏览器缩放和javascript缩放都在if语句中。

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

Answer 1

您可以尝试使用CSS属性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>

我如何使用JavaScript模拟浏览器事件

问题描述

1 个解决方案

解决方案1
0 2018-02-05 09:39:23

我如何使用JavaScript模拟浏览器事件

问题描述

1 个解决方案

解决方案1 0 2018-02-05 09:39:23

解决方案1
0 2018-02-05 09:39:23