2015-10-15 183 views
2

我試圖在頁面完全加載到vaadin後加載我的腳本標記或一些jquery函數。我使用JavaScript註釋來加載我的外部js。像這樣 @JavaScript(「vaadin://themes/custom/resources/js/custom.js」);如何在頁面加載後在Vaadin中加載js函數

有沒有什麼辦法可以在html中創建頁面加載或dom對象後調用一些js函數。

回答

-1

the docs,添加以下你custom.js

$(document).ready(function() { 
    //call your function 
}); 
+0

當使用像Vaadin這樣的框架時,這將無法按預期工作,因爲這是單頁應用程序。 – steve

+0

@steve感謝您的輸入。你能提供更多的細節或樣本來維持你的肯定並解釋爲什麼會發生這種情況嗎?我問,因爲我已經使用它沒有任何問題... – Morfic

+0

這取決於你使用它,因爲'準備好'是在DOM完全加載時觸發的。然而,這並不意味着Vaadin組件,html元素被加載和渲染。因爲海報說「完全裝入vaadin」,所以$(document).ready不會按預期工作。 – steve

0

是的,有。試試這種方法:

import com.vaadin.ui.JavaScript; 
...  
StringBuilder script = new StringBuilder(); 
script 
    .append("var head = document.getElementsByTagName('head')[0];") 
    .append("var script = document.createElement('script');") 
    //...do other stuff to set up the "script" tag (add content, source, whatever) 
    .append("head.appendChild(script);"); 
JavaScript.getCurrent().execute(script.toString()); 

如果你在頁面完全加載之前這樣做,那麼一切都很好。但是如果你想在事實之後(通過某個事件或點擊監聽器)來做到這一點,那麼你還必須使用Vaadin push來將這個JavaScript傳遞給客戶端。像這樣:

import com.vaadin.ui.UI; 
... 
UI.getCurrent().access(new Runnable() 
{ 
    @Override 
    public void run() 
    { 
     //code from above that leads to JavaScript.getCurrent().execute(...) 
     UI.getCurrent().push(); 
    } 
}); 

當然,這裏假設您已經在Vaadin應用程序中啓用了push。參考https://vaadin.com/book/-/page/advanced.push.html

+0

Adeel Mufti thanx很多你的幫助。如果你沒有我可以請你的電子郵件地址。 –

+0

@hermanshafiq嗨,如果此答案已修復(或幫助修復)您的問題,請考慮選擇它作爲您問題的正確答案,方法是點擊投票站前面的檢查符號(v)。這是對某人表示感謝的SO方式,並且在此過程中,您還可以幫助其他可能有類似問題的用戶快速找到問題的答案。如果您選擇以不同於任何建議的解決方案來解決問題,您也可以添加並選擇自己的答案 – Morfic

相關問題