Question

我试图更改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>

请帮帮我

亲切的问候倪吉娜

Answer 1

那里有几个问题。

主问题是您遇到了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。

Answer 2

如果iframe来源属于您的控件：

简单的答案是你需要将iframe完全视为一个单独的网页，因为实际上，它就是这样。它应该有自己的CSS / JS文件等等，这样你就可以根据需要进行操作。

如果您希望以更动态的方式操作它，可以将一个变量附加到iframe src URL（很像已经存在的dealer_id），然后使用JS检查变量值/存在并添加一个相应的特定类别。

iframe来源的示例结构

iframe的content.html？imgvar =隐藏

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

iframe-script.js - 使用它来检查src URL中的变量，并将hide class添加到img（如果存在）。

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

2 个答案: