如何通过jQuery在iframe中获得div样式？

Question

在我将要访问的网页上有一个带有Youtube视频的iframe，我可以使用jQuery在iframe中获得一个div。然而，我不能得到它的风格(如背景-图像)的div。有解决办法吗？

HTML代码如下：

<iframe width="600" height="344" src="http://www.youtube.com/embed/aaaaa?wmode=transparent" frameborder="0" allowfullscreen="">
  <div class="ytp-thumbnail-overlay" data-layer="4" style="background-image: url('https://i.ytimg.com/vi_webp/JPkV4li7FVQ/sddefault.webp');">
    This is a div in iframe
  </div>
</iframe>

jQuery代码如下：

var div = $("iframe>div.ytp-thumbnail-overlay");//Here div is not undefined.
var url = div.css('background-image');//Here url is undefined, why and how to get it?

Answer 1

有几件事挡住了你的去路。首先，iframe是一个替换元件，所以当页面加载时，<iframe></iframe>中的html被删除并替换为iframe的内容。

其次，同源政策阻止您使用脚本从iframe内部检索任何数据，因此您无法检索YouTube为div.ytp-thumbnail-overlay生成的背景图像。