2015-10-15 143 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

相关问题