Question

我有一个包含嵌入式iframe的页面，我需要设置iframe中显示的元素样式。问题是我无法编辑iframe（我认为它的起源相同，但我不确定），因此我需要通过父框架中的代码设置iframe内容的样式。我试图通过选择器做到这一点但没有成功。

例如：

<html>
   <body>
      <iframe id="frame">
         <div id="target">target</div>
      </iframe>
   </body>
</html>

CSS方法：

#frame #target{
   background:red;
}

jQuery方法：

$("#frame #target").css({'background':'red'});

Answer 1

您可以使用.contents()功能：

$('frame').contents().find('#target').css({'background':'red'});

Answer 2

您使用的内容无效，因为在加载父页面后iFrame需要一些时间才能加载。因此，在加载iFrame之前会加载父页面的CSS和JS，因此样式和js不会应用于iFrame。

您可以使用

$('#frame-target').contents().find('#target-inside').css({'background': 'red'});

实现这一目标。我实际上并不记得是否等待加载iFrame。如果这不起作用，您可以等到它加载了加载事件或设置超时1秒后再应用它。