我如何使用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