Question

我想使用javascript来模拟缩放和缩小浏览器的事件。与MAC一样，您可以使用Command +进行缩放，并使用Windows Control +。我希望显示与这些命令相同的效果，所以我想到使用vanilla javascript触发这些命令。但到目前为止还无法实现任何目标。有没有人实现过它？

为了模拟事件，我使用Command和=创建了keydown事件（在Mac的情况下为zoomIn），但它没有触发缩放事件： -

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

要验证，我正在侦听缩放事件，手动浏览器缩放和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 property transform: scale()

模拟该行为

＆＃13;

<!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>

＆＃13;

如何使用javascript模拟浏览器事件

1 个答案: