如何控制動態加載到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？

回答

相關問題