javascript - 在嵌入式YouTube iframe中检测事件？

Question

我想要的:

在youtube iframe中检测事件。例如单击和触摸开始。

我的问题:

CODEPEN

我懂了

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "https://www.youtube.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

我猜问题出在登录YouTube。

我的代码:

的HTML

<iframe id="someid" width="560" height="315" src="http://www.youtube.com/embed/tbaJS14t6Gw" frameborder="0" allowfullscreen></iframe>

JS

$("#someid").load(function(){
  var iframe = $("iframe").contents();
console.error(iframe.find("body").length + "error happens above");

  $("iframe body").on("click", function(){
  alert("click");
});
  });

进一步阅读:

Detect click event inside iframe

Answer 1

你不能如果iframe的内容文档与页面具有相同的来源，则只能访问其内容；由于此iframe的内容文档是Youtube，因此它始终是不同的来源。

该错误消息有点令人误解，因为它将http / https不匹配识别为问题。从技术上讲这是正确的，因为协议(protocol)是源的一部分，但是更重要的是主机名是不同的。

捕获针对iframe的事件的唯一方法是在框架上放置一个透明元素。但是，这将完全阻止事件传递到框架。 (不，您不能自己生成事件，也不能允许它们通过您的元素传播。)因此，长话短说，您需要退后一步，想出另一种实现目标的方法；无法按照您的要求进行操作。