2010-10-01 146 views
0

我有一個關於Javascript小部件的問題。我正在處理的小部件只是將內容嵌入頁面而不是使用iframe。到目前爲止它看起來不錯。但有些情況下,某些用戶佈局會弄亂小部件。例如,小部件可能需要顯示300px的寬度。但父div被設置爲250px,因此小部件的右側部分被切斷。Javascript小部件實現

我想知道應該採取什麼樣的預防措施來防止這種情況發生?我正在和產品經理交談,他提到他希望我檢查父div元素並獲取大小,然後在大小不準確的情況下顯示備用信息。但是,再次,因爲這是Javascript,並且該小部件在許多差異瀏覽器(包括IE6)中受支持,所以我想知道這種方法的失效安全性如何?如果我需要在獲得有效大小之前一直迭代DOM,該怎麼辦?我也擔心這裏的表現。由於我爲所有用戶添加了一層複雜性,所以這些額外的檢查會減慢我的小部件內容向「好用戶」的交付。我不想因爲少數錯誤的人而懲罰好用戶。

我是不是在這裏使用任何類型的JS庫,所以任何解決方案不應該建議使用一個。另外,不使用庫的原因不在於爲頁面加載增加額外的重量來提供小部件。我明白,例如「jquery」很小,但在我的情況下,即使是24k壓縮,對於小部件傳遞來說也不過分,它不包含小部件的核心代碼。

有沒有人處理過這些問題?你有什麼解決方案?

+0

已嘗試使用百分比(%)(或em)而不是絕對值?例如爲寬度。就性能而言,我認爲你正在談論毫秒的幾分之一。 – Andreas 2010-10-01 17:41:08

+0

不,它必須是確切的寬度,因爲它傳遞的內容依賴於某些可讀的項目 – Dhana 2010-10-01 17:45:00

+0

因此,我們需要一個「檢查其環境」的容器元素,然後將所需的值設置爲所需的屬性。好像你必須在渲染之前檢查容器元素。 – Andreas 2010-10-01 17:47:57

回答

0

有確定使用JavaScript的元素大小的可靠方法。在某些情況下,您可能需要迭代樹,但您得到的答案最終會非常有效。

儘管您不想直接在此項目中包含任何庫代碼,但您可以考慮查看主要庫如何實現其「此元素的寬度」功能以實現您自己的實現。