如何控制动态加载到 iframe 中的内容的 CSS？答案

【问题标题】：How to control the CSS of the contents that loaded dynamically into iframe?如何控制动态加载到 iframe 中的内容的 CSS？
【发布时间】：2013-07-03 14:20:02
【问题描述】：

我尝试更改 iframe 中内容的 css。即我需要隐藏 <img> 元素。但是我改不了。。这是示例代码：

<!DOCTYPE html>

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <iframe src="http://www.carsales.com.au/pls/carsales/!dealer_content.welcome?dealer_id=10978" width="80%" height="600" id='frameDemo'></iframe> 

<script>
  $("#frameDemo").contents().find("img").css("display", "none");
</script>



</body>

</html>

请帮帮我

亲切的问候鸟吉娜

【问题讨论】：

Same-origin policy
是的。这是一个 CORS 问题，但请务必将 .css('display', 'none') 替换为 .hide()

标签： jquery html css iframe

【解决方案1】：

如果 iframe 源由您控制：

简单的答案是您需要将 iframe 完全视为一个单独的网页，因为确实如此。它应该有自己的 CSS/JS 文件等，这将允许您根据需要对其进行操作。

如果您希望以更动态的方式对其进行操作，您可以将变量附加到 iframe src URL（很像您已经存在的经销商 ID），然后使用 JS 检查变量值/存在并添加相应地对您的图像进行特定的分类。

iframe 源的示例结构

iframe-content.html?imgvar=hide

iframe-style.css - 在此处定义隐藏样式（例如：.hide{display:none;}）

iframe-script.js - 使用它来检查 src URL 中的变量，如果存在则将隐藏类添加到 img。

【讨论】：

亲爱的戴恩感谢您的帮助。但是，我对你的解释感到困惑。你能把示例代码发给我吗？如果您为我创建示例代码，我非常感谢您。我的邮箱：jjstar215@gmail.com 期待您的帮助！问候鸟吉娜

【解决方案2】：

这里有几个问题。

主要问题是您遇到了Same Origin Policy。您没有脚本访问来自与运行脚本的页面不同来源的框架的内容。

如果框架的内容来自同一个来源，您需要等待框架内容上的load 事件。示例：Live Copy | Live Source

var frame = $("<iframe>");
frame.load(frameLoaded);
frame.attr("src", "http://jsbin.com/inanin/1");
frame.appendTo(document.body);

function frameLoaded() {
    frame.contents().find("img").hide();
}

但同样，主要问题是 SOP。

【讨论】：