2013-12-09 20 views
4

問題: FireFox Only。jQuery show/fadeIn不適用display:阻止隱藏父元素內的子元素 - 僅限FireFox

在頁面加載時,我有一個隱藏的iFrame(我不控制父頁面)。在這個iFrame中,我有隱藏/顯示基於狀態的元素,並使用jQuery show()/fadeIn()來處理這個問題。

當頁面加載時隱藏iFrame(始終是),display:blockdisplay:inline-block未應用於這些元素。如果iFrame在頁面加載時可見,則正確處理並分配子元素display:block

我知道我可以通過簡單地使用$el.css('display', 'block')來解決這個問題,但我想了解問題的根源並正確解決問題,並發現這是否是jQuery錯誤。爲什麼jQuery沒有顯示基於父母的元素,爲什麼只有只有 FireFox(Gecko渲染引擎)?

預期結果: 不管父(iFrame中的)的可見性或顯示的,該子元素應該使用$el.show()時被更新爲可見狀態(當然,保持隱藏,直到被示出的父元素)。

我已經爲一個可靠的答案做了一些廣泛的搜索,但所有論壇都沒有解決方案或答案而結束,而是使用了一種解決方法。

以前看過和/或解決過這個問題嗎?

謝謝!

更新

當我創造了小提琴(S)我來到一個解決方案。我對iFrame幕後發生的事情並不是100%肯定的,但現在看到了一種模式。它看起來加載事件沒有在iFrame內觸發。

父小提琴:http://jsfiddle.net/kaizen5/BxkxB/

的iFrame小提琴:http://jsfiddle.net/pQqXc/(有此頁面上的一個容器,是由上可見負載)

你會發現,當你點擊(「壞」)按鈕首先它揭示了iFrame和小提琴似乎是空的。這是因爲Fiddle iFrame正在調用一個負載函數來揭示小提琴的內容。這模仿了我在我自己的解決方案中看到的問題。

'好'按鈕,顯示iFrame並且還(重新)分配'src',強制頁面的新渲染。這一次,載入式事件觸發得很好。

+0

你能提供一個鏈接到你的網頁嗎?或者,最好鏈接到它的簡化版本(只顯示問題,沒有別的)?你的問題現在包含了太多的未知數... iframe是如何隱藏的;你爲什麼要關心它的內容是什麼樣子,如果它總是隱藏的,等等。 –

+0

我的意思是,我製作了[小提琴](http://jsfiddle.net/Ypx75/1),它簡單地顯示了它在所有瀏覽器中的作用,所以你的情況與此不同。 –

+0

嘿李斯特先生,不幸的是,我沒有什麼可以公開分享的。讓我試着再解釋一下。 iFrame默認爲隱藏。同樣,iFrame中也有隱藏的元素。在iFrame頁面加載時,我選擇性地在iFrame中顯示這些元素(iFrame仍然隱藏)。在用戶事件發生之前,iFrame保持隱藏狀態。當顯示iFrame時,編程顯示的輸入不可見。這隻適用於FireFox,並且使用jQuery的show()或fadeIn()。 –

回答

0

這實際上並不是在Firefox中onload/onready沒有觸發的問題。因爲它。

這個問題是非常明確的show()函數不能在這種特殊情況下工作 - onload在隱藏時在iframe中運行。

$('...').show()替換爲$('...').css('display','inline'),它工作正常。

在Firefox和Chrome中查看此小提琴組合頁面http://jsfiddle.net/xZdLx/4/和iframe http://jsfiddle.net/L3Lxn/10/

一個非常好奇的錯誤,無論是在jQuery或Firefox中的錯誤,以及一個很好的發現。

解決方法

當你發現你自己,show()會工作,如果你首先顯示的iframe,然後迫使火狐通過更新iframe的src -attribute重新加載頁面。