iframe - 在iframe中,css覆蓋內容的body 樣式

  显示原文与译文双语对照的内容
71 0

如何控制 iframe 中 body 元素的background 圖像和顏色? 注意,嵌入式 body 元素有一個類,iframe 是一個頁面,它是我的站點的一部分。

我需要這個原因是我的網站有分配給 body的black background,然後分配給包含文本的div的白色 background 。 所見即所得編輯器在編輯時使用 iframe 嵌入內容,但它不包含 div,所以文本非常難以閱讀。

在編輯器中,body的有一個不使用的類,所以我假設這樣可以解決這個問題。 但是,當我對 class.body 應用樣式時,它們不會覆蓋應用於 body的樣式。 奇怪的是,這些樣式確實出現在Firebug中,所以我不知道發生了什麼 !

謝謝

更新- 我嘗試了 @mikeq's 解決方案,將樣式添加到類的body 類中。 當添加到頁面的主樣式表時,這不會工作,但是在添加Firebug時它確實工作。 我假設這是因為Firebug被應用於頁面上的所有元素,而CSS不應用於cxf中。 這是否意味著使用JavaScript在窗口載入后添加css會工作?

时间: 原作者:

102 4

iframe是頁面中顯示它的另一個網頁 inside的'球洞'。 iframe的內容不在你的父頁的任何形狀或者構成部分。

就像其他人所指出的,你的選項是:

  • 向iframe中載入的文件提供必要的CSS
  • 如果iframe中的文件與父文件相同,那麼你可以從of中訪問文檔的DOM 。
原作者:
91 0

只有當iframe內容來自同一父域時,才能使用

下面的jquery腳本適用於我。 在 Chrome 和IE8上測試。 inner引用與父頁位於同一域上的頁。

這種特殊情況下,我隱藏了內部iframe中具有特定類的元素。

基本上,只需將'樣式'元素附加到內部iframe的'頭部'。


$('iframe').load( function() {


 $('iframe').contents().find("head")


. append($("<style type='text/css'>. my-class{display:none;} </style>"));


});



原作者:
122 1

如果你有直接訪問,則不能更改iframe的樣式,因此你將擁有源html和//css文件的所有權。

這是為了停止的XSS ( 跨站點腳本) 。

原作者:
108 0

iframe 有另一個作用域,因此你不能訪問它,也不能用javascript更改它的內容。

基本上是"另一頁"。

你唯一能做的就是編輯它自己的CSS,因為你的全局CSS不能做任何事情。

...