Jquery 将 css 添加到 iframe 内容时出现问题

Question

我发现了多篇关于如何将 css 添加到 iframe 内容的帖子，这是我的代码:

$(function() {
    $('iframe').addClass('bro'); //does work
    $('iframe').contents().find('html').addClass('broz'); //doesn't work
    $('iframe').contents().find('.side-section').addClass('brozzz'); //doesn't work
});

第一个标识符按预期工作，但所有其他标识符都不起作用。我只是想测试为什么它们不起作用，这不是我正在做的实际工作。

这是 iframe 代码:

<iframe src="http://www.dropcards.com/download/profilewidget/?ArtistID=17121" width="400" height="230" scrolling="no" frameborder="0" allowtransparency="true" ></iframe>

Answer 1

如果页面与包含 iframe 的域不是来自同一域，则无法修改 iframe 中页面的 dom。 这个想法是为了防止 XSS、跨端脚本。

您可以在此处找到更多信息 same origin policy

在第一种情况下，您正在修改页面的 dom，在接下来的两种情况下，这是不可能的，因为您无权访问 iframe 中包含的页面的 dom