Question

我想：

检测youtube iframe中的事件。例如click和touchstart。

我的问题：

我得到了

Uncaught SecurityError：无法读取'contentDocument'属性来自'HTMLIFrameElement'：阻止具有原点的帧 “http://s.codepen.io”访问具有原点的框架 “https://www.youtube.com”。请求访问的帧具有协议在“http”中，被访问的帧具有“https”协议。协议必须匹配。

我猜这个问题来自于登录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不匹配标识为问题。这在技术上是正确的，因为协议是部分的原点，但更重要的是主机名不同。

捕获针对iframe的事件的唯一方法就是在框架上放置一个透明元素;但是，这会阻止事件传递到帧。（不，你不能自己生成事件，或允许它们通过你的元素传播。）所以，长话短说，你需要退后一步，找出实现目标的另一种方式;没有办法以你要求的方式去做。

检测嵌入式youtube iframe中的事件？

1 个答案: