Question

我正在尝试创建一个chrome扩展程序，该扩展程序使用DOM.click（）方法单击网站上的按钮。（https://www.w3schools.com/jsref/met_html_click.asp）

编辑：此chrome扩展程序的目的是创建一个键盘快捷方式，以在观看外语视频时打开/关闭英语字幕。如果要尝试理解没有字幕的语言，则在需要时必须使用鼠标并拖动鼠标以打开菜单以打开字幕。我想创建一个可以立即打开字幕的键盘快捷键。这样的网站的一个例子是（https://www.ondemandkorea.com/ask-us-anything-e102.html）

<button type="button" class="jw-reset jw-settings-content-item" role="menuitemradio" aria-checked="false">English</button>

这是我要使用Javascript单击的网站上的按钮

在我的代码中，我有一个窗口侦听器，等待特定的网站加载。然后，要找到我要单击的按钮，我调用 document.getElementsByClassName（“ Class Name”），然后在返回的元素数组中查找一个表示 English 的按钮。并将其保存到 var englishButton 中。我添加了另一个侦听器，该侦听器监听要按下的键盘键，然后依次按下 englishButton 。

但是，当我单击快捷键时， englishButton.click（）; 似乎没有任何作用。我知道找到了正确的英文按钮，并且我的shortcutKey Listener通过使用 console.log（）语句来工作。

我似乎不明白为什么按钮无法单击。

编辑：在代码中添加buttonListener之后，英语按钮毕竟会单击，但不会打开视频的字幕

这是我的代码。

  /*
Looking for the subtitle button that states "English"
*/
var englishButton;
window.addEventListener("load", function(event) {

    var buttonList = document.getElementsByClassName('jw-reset jw-settings-content-item');

    for (var i = 0, len = buttonList.length; i < len; i++){
        if(buttonList[i].textContent === "English") {
          englishButton = buttonList[i];
          break;
        }

    }
    englishButton.addEventListener('click', function() {
      console.log('englishButton clicked!');
    });

    /*
    Event Listener that detects when the shortcut key is hit.
    When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
    */

    document.addEventListener('keyup', function(e){
        if(e.key === shortcutKey){
          console.log('shortcut pressed')
          englishButton.click();
        }
      }
    );

});

Answer 1

我建议您使用jQuery，因此可以使用诸如keyup（）或keydown（）之类的功能，以便可以在按下某个键时进行监听。如果我们只想监视DOM元素而不使用类，那么更好的做法是按id检查元素。

Answer 2

将所有代码移至load侦听器中：

https://codepen.io/ryanpcmcquen/pen/EOerPM?editors=1011

window.addEventListener("load", function(event) {
   /*
   Looking for the subtitle button that states "English"
   */
   var englishButton;
   // console.log('Website loaded. englishButton:', englishButton);
   var buttonList = document.getElementsByClassName("jw-reset");

   for (var i = 0, len = buttonList.length; i < len; i++) {
      if (buttonList[i].textContent === "English") {
         englishButton = buttonList[i];
         // console.log("englishButton found", englishButton);
         break;
      }
   }
   // console.log("End of window-load's callback. englishButton:", englishButton);
   /*
   Event Listener that detects when the shortcut key is hit.
   When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
   */
   document.addEventListener("keyup", function(e) {
      console.log(
         "Inside document-keyup's callback. englishButton:",
         englishButton
      );
      if (e.key == "z") {
         //Logic to press the subitle button
         console.log(
            "Key matched: ",
            e.key,
            "Now click button. englishButton:",
            englishButton
         );
         englishButton.click();
         console.log("Shortcut Key");
      } else {
         console.log("Random Key");
      }
   });

   englishButton.addEventListener("click", function() {
      console.log("englishButton clicked!");
   });
});

<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
</head>

<body>
   <button type="button" class="jw-reset">English</button>
</body>

</html>

但是您的代码中有一些可以改进的地方，所以让我们看一下代码的“现代化”版本（代码中的注释）：

// Using the `window` `load` event is fine, but
// you should prefer the `document` `DOMContentLoaded`
// event when possible, since it fires when the DOM
// has been constructed, while `load` means all assets have fully loaded (images).
// For your case since you are relying only on elements,
// `DOMContentLoaded` is a better choice.
document.addEventListener("DOMContentLoaded", function(event) {
   /*
   Looking for the subtitle button that states "English"
   */
   var englishButton;

   // Use `querySelectorAll` since it is more dynamic and
   // will accept any type of selector. Also, for loops
   // are avoided in most modern JavaScript because
   // they create scoping and off-by-one errors.
   // Since you want to break out of the loop here,
   // we will use `.some()`. `Array.prototype.slice.call()`
   // converts the NodeList returned by `querySelectorAll`
   // into an Array.
   Array.prototype.slice.call(document.querySelectorAll(".jw-reset")).some(
       function (button) {
           if (button.textContent === 'English') {
               englishButton = button;
               return true;
           }
       }
   );
   
   /*
   Event Listener that detects when the shortcut key is hit.
   When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
   */
   document.addEventListener("keyup", function(e) {
      console.log(
         "Inside document-keyup's callback. englishButton:",
         englishButton
      );
      if (e.key === "z") {
         //Logic to press the subitle button
         console.log(
            "Key matched: ",
            e.key,
            "Now click button. englishButton:",
            englishButton
         );
         englishButton.click();
         console.log("Shortcut Key");
      } else {
         console.log("Random Key");
      }
   });

   englishButton.addEventListener("click", function() {
      console.log("englishButton clicked!");
   });
});

<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
</head>

<body>
   <button type="button" class="jw-reset">English</button>
</body>

</html>

Answer 3

在您对问题的评论中，您确认该按钮实际上是在触发点击。因此，您遇到的问题是通过点击产生预期的结果。可以打开和关闭英文字幕。这里有一个更好，更简单，更可靠的替代方法。

该网站使用JW Player播放其视频。他们有一个文档齐全且开放的API（https://developer.jwplayer.com/jw-player/docs/developer-guide）。

您要做的就是这样

jwplayer().setCurrentCaptions(X)

此处X是您要从特定视频中所有字幕的列表中选择的字幕选项的索引号。

在您的示例视频中，列表只有两项：

0：关闭
1：英语

所以要打开英语：

jwplayer().setCurrentCaptions(1)

并关闭所有字幕：

jwplayer().setCurrentCaptions(0)

如果一个视频到另一个视频的索引不同，则需要首先获取可用字幕的列表，然后找到英语的索引号。

let allCaptions = jwplayer().getCaptionsList();
englishCaptionIndex = allCaptions.findIndex(caption => caption.label == 'English');

就是这样。

您可以使用API进行各种有趣的事情。

在官方网站（Chrome扩展程序）上单击带有Javascript的按钮

3 个答案: