使用 "role=button" -- JavaScript 模拟对 div 元素的点击

Question

美好的一天，

我知道这个问题已经被问过很多次了。我上下搜索以使其正常工作，但似乎发生了一些变化，答案不再有效。

在 YouTube 上，当我运行在控制台中使用此模拟点击功能时。有效。

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementsByClassName("ytp-play-button")[0]; //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

那是因为有一个按钮叫做"ytp-play-button"。

但是，当我将它带到 YouTube TV（以前称为 leanback）时。这没用。 div 函数有一个 "role=button"。

这是负责播放按钮的div。

<div class="toggle-button selected material-icon-play-arrow toggle-selected transport-controls-toggle-button" tabindex="-1" role="button" style="">  <div class="background"></div>  <span class="label">Pause</span></div>

所以我将 "ytp-play-button" 更改为 "material-icon-play-arrow" 但即使 class 正确。这没用。

如有指点，将不胜感激。谢谢你。

P.S.: 这是一个纯粹的 JavaScript 问题，而不是 jQuery 问题。

编辑#1：当我尝试运行在控制台中像这样点击时

document.getElementsByClassName("material-icon-play-arrow")[0].onclick()

我遇到了这个错误。

Uncaught TypeError: document.getElementsByClassName(...)[0].onclick is not a function at :1:64 (anonymous) @ VM7969:1

Answer 1

您可以使用 YouTube Iframe Player API 设置嵌入 YouTube 视频并控制与视频互动的方式。

对于您的具体情况，您需要 play/pause YouTube 视频，方法是单击 HTML 元素 （在本例中为 div 元素）.

要实现此功能，您可以使用以下代码 - 请参阅此 jsfiddle 中的工作示例。

那里，基本上我有一个 div 元素 （称为 playButton） 和 （使用 onPlayerStateChange 函数)点击事件我设置如下：

当视频正在播放时，div playButton 的文本为 "Pause" 并且其点击事件允许暂停视频。
当视频暂停时，div playButton 的文本为 "Play" 并且其点击事件允许播放视频。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Variables of the divs (where the YouTube iframe will load):
var player;

function onYouTubeIframeAPIReady() {

  // Div player:
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

  // After loading the iframe, set the "playVideo" onclick event on "playButton" anchor element.
  document.getElementById('playButton').onclick = function() {
    player.playVideo();
  };

}

// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {

  // If the video is PLAYING, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will be paused.
  if (event.data == YT.PlayerState.PLAYING) {
    document.getElementById('playButton').innerHTML = 'Pause';

    // Set the onclick event to the button for pause the YouTube video.
    document.getElementById('playButton').onclick = function() {
      player.pauseVideo();
    };
  }

  // If the video is PAUSED, set the onclick element for pause the video.
  // Once the "playButton" is clicked, the video will resume the video = continue playing the video.
  if (event.data == YT.PlayerState.PAUSED) {
    document.getElementById('playButton').innerHTML = 'Play';
    document.getElementById('playButton').onclick = function() {
      player.playVideo();
    };
  }
}

// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

<!-- In this div, the YouTube video will be loaded with YouTube iframe Player API. -->
<div id="player"></div>

<!-- N.B this is the div element used for play or pause the current video loaded with YouTube iframe Player API. -->
<a href="#" id="playButton">Play</a>

这里是官方文档中的“Playback controls and player settings”以获取更多详细信息。

使用 "role=button" -- JavaScript 模拟对 div 元素的点击

Simulate a click on a div element with "role=button" -- JavaScript

html

javascript

youtube

google-chrome