使用相同的密钥在网站中触发两个不同的操作 - TamperMonkey - JavaScript

Question

我创建了一个 TamperMonkey 脚本来修复一些错误并在我作为安全专家工作的网站上创建快捷方式。

一个动作是使用键 W 和 E 打开某些图像。这些图像在页面加载时显得很小，单击时会缩放弹出，因此我可以阅读上面的内容。

问题是，要再次关闭它们，我必须手动单击 X 按钮，我已经将其设置为 TAB 键。

如果再次按下打开图像的同一个键将其关闭会更容易。

这是我目前使用的脚本。

   // ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
  if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img").click(); // this will trigger the click event and load the image in bigger size
  }
}, false);
})();


   // ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
  if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img").click(); // this will trigger the click event and load the image in bigger size
  }
}, false);
})();

   // ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
    (function(){
  document.addEventListener('keydown', function(e) {
 // pressed TAB
  if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click(); // this will trigger zoomed in media to be closed
  }
}, false);
})();

我不是开发人员；我是一名摄影师 CSA/Safety 专家，而我国的大流行病仍然很严重。

如有任何帮助，我们将不胜感激！

Answer 1

如果您的代码添加了 class 来缩放图像或直接更改图像的样式，您可以进行检查并触发点击图像或按钮。

另一种方法是将缩放后的图像存储在列表中并检查它以触发适当的点击：

const trigger = (img) =>
{
  if (!img || trigger.list.get(img)) //is img was previously zoomed?
  {
    if (img)
      trigger.list.delete(img);
    else
      trigger.list.clear();

    if (img !== false) // if false it was called from onclick of the reset button
      document.querySelector("#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button").click();    
  }
  else
  {
    trigger.list.set(img, 1); //store image in the map
    img.click();
  }
};
trigger.list = new Map();

// ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img"));//this will trigger the click event and load the image in bigger size
    }
  }, false);
})();


// ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img")); // this will trigger the click event and load the image in bigger size
    }
  }, false);
})();

// ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY
(function() {
  document.addEventListener('keydown', function(e) {
    // pressed TAB
    if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      trigger(); // this will trigger zoomed in media to be closed
    }
  }, false);
})();

img {
  width: 100px;
}

<div id="root">
  <div class="_207u8cFhj1qJCuOVY3G3XU">
    <div class="_22c-iquDGgsWF7kWWz--mz">
      <div class="_2-Lr5G9MaWKGAeCMsEEoBi">
        <div>
        <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
        </div>
        <div>
        <img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" onClick="this.style.width = '200px'">
        </div>
      </div>
    </div>
  </div>
  <div class="_1qw_lOmwJT6xuZplKq1ilH">
    <div class="_26T7BbVDhm0i411GqTgBgr">
      <div>
        <button onclick="document.querySelectorAll('img').forEach(e=>e.style.width='100px');trigger(false)">reset</button>
      </div>
    </div>
  </div>
</div>

使用相同的密钥在网站中触发两个不同的操作 - TamperMonkey - JavaScript

Use same key to trigger two different actions in a website - TamperMonkey - JavaScript

javascript

tampermonkey