如何通过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是replaced element，因此在加载页面时，<iframe></iframe>中的html将被删除并替换为iframe的内容。

其次，same origin policy阻止您使用脚本从iframe中检索任何数据，因此您无法检索YouTube为div.ytp-thumbnail-overlay生成的背景图片。