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

我试图改变iframe中内容的CSS。即我需要隐藏<img>元素。但我cannnot改变.. 下面是示例代码：如何控制动态加载到iframe中的内容的CSS？

<!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>

请帮我

亲切的问候茑集纳

来源

2013-07-03 user2523824

[同源政策]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript） – Antony

是的。这是一个CORS问题，但请用'.hide（）替换'.css（'display'，'none'）' – jedmao

如果iframe的来源是你的控制：

简单的答案是，你需要治疗的iframe作为完全一个单独的网页，因为真的，这是这一点。它应该有它自己的CSS/JS文件等，这将允许您根据需要操作它。

如果您希望以更动态的方式操作它，您可以在iframe src URL中添加一个变量（与已存在的dealer_id很像），然后使用JS检查变量值/存在性并添加相应地为您的图像添加一个特定的类iframe的源

示例结构

iframe的content.html imgvar =隐藏

iframe的style.css中 - 在这里定义隐藏式（例如：.hide {显示：无;}）？

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

来源

2013-07-03 06:20:02 Dayne

尊敬的戴恩感谢您的帮助。但是，我对你的解释感到困惑。你可以给我发送示例代码吗？如果您为我创建示例代码，我非常感谢您。我的电子邮件：[email protected] 我期待着您的帮助！致以问候廖季娜 – user2523824

发送1个样本代码。希望它有帮助 – Dayne

有几个问题存在。

该主问题是，你正在运行到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。

来源

2013-07-03 05:22:54

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

回答

相关问题