2011-10-12 215 views
2

我有一個網頁,其中運行gwt應用程序的iframe。該網頁有一個<div id="head">。無法滾動iframe(預期),因此網頁的高度爲1000像素。在最下方有一個按鈕,當有人點擊該按鈕時(我注意:按鈕位於gwt應用程序中),我想要滾動到頂部。如何滾動到GWT中的div ID

這意味着iframe需要強制父窗口滾動到頂部。我試着用這樣一個jsni功能:

public static native void scrollToTop() /*-{ 
     $wnd.top.scrollTo(0,0); 
    }-*/; 

但是這並沒有奏效。所以我的新想法是滾動到div ID「標題」。有誰知道如何做到這一點?

我想它是這樣的:

document.getElementById('header').scrollIntoView(); 

,但似乎沒有工作(因爲它應該在JSNI的方式?)。

感謝您的任何意見!

回答

4

由於GWT在iframe中運行,因此document引用了GWT的iframe,而不是您的「HTML主機頁面」,因此失敗。您必須在JSNI中使用$doc來引用文檔(就像$wnd而不是window)。

但是你實際上並不需要JSNI;普通老Java/GWT會這樣做:

Document.get().getElementById("header").scrollIntoView(); 
+0

除非在包含GWT運行的iframe的網頁中顯示「標題」。然後你無法訪問它。 –

+0

用普通的舊/ GWT方式,我得到了一個UmbrellaExeption。我的感覺是,它無法找到父窗口中定義的div id =「header」。 – mkn

+0

@HilbrandBouwkamp:「標題」位於包含iframe的網頁中。這是我想解決的問題。我也嘗試了在父窗口(包含iframe的網頁)中使用javascript,並從iframe中調用該javascript函數。但是,我有不安全的訪問異常,因爲iframe中的網頁和網頁來自不同的地址。我真的必須以某種方式解決這個問題,沒有iframe沒有解決方案:( – mkn

0

最後我找到了解決方案。您必須在網站頂部(iframe中的網站)設置一個錨點。請查看我的其他post瞭解更多詳情。

P.S.我希望你看到這篇文章的重要性,並且讚揚它。這會爲其他人節省很多時間。

+0

請注意,使用錨會創建一個新的歷史記錄條目 –

+0

它不會那樣做,但它解決了GWT嵌入到iframe中時的聚焦問題。當您在iframe中有網站並且在iframe中單擊按鈕切換網站時,您可以執行其他許多人建議的操作(使用onload標記iframe標籤)如果解決方案很明顯,那麼我早就預料到了這個解決方案,但沒有人能夠解決它現在我發現了這個簡單的解決方案,我只想讓其他人(在iframe中使用gwt)不要花太多時間來搞清楚這一點。 – mkn

+0

是的,我明白。這只是爲了確保人們瞭解後果。另請注意,只有當iframe中的網頁位於另一個域時纔會出現此問題。因爲在那種情況下你不能訪問'top.scrollTo'。 –