gwt中java与js的相互调用

比眉伴天荒 2022-07-16 14:10 280阅读 0赞

1. java通过jsni调用内部js

Button button = new Button("java调用内部jsni的js方法"); button.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 execute("js方法被调用"); \} \}); /\*\* \* JSNI方法 \* @param id \*/ public static native void execute(String str) /\*-\{ alert(str); \}-\*/;

2. 内部js通过jsni调用java方法

Button button1 = new Button("内部jsni的js调用java方法"); button1.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 executeJs("java方法被调用"); \} \}); /\*\* \* JSNI方法, 里面调用java方法 javaAlert \* @param id \*/ public static native void executeJs(String str) /\*-\{ @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str); \}-\*/;

3.gwt中java方法调用外部js

在gwt工程的index.html中加入外部方法

<mce:script language="JavaScript"></mce:script>

然后在onModuleLoad中java方法进行调用

Button button2 = new Button("JAVA调用外部js"); button2.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 callOutJS("外部js被调用"); \} \}); /\*\* \* JSNI方法 调用外部js方法 \* @param id \*/ public static native void callOutJS(String str) /\*-\{ $wnd.callOutJs(str); \}-\*/;

4.  外部js调用gwt的java方法

在onModuleLoad方法中调用  outJsCallGwt();

outJsCallGwt方法为

/\*\* \* 需要被调用的js方法 \* @param id \*/ private static native void outJsCallGwt() /\*-\{ $wnd.outJsCallGwt = function (str) \{ alert("此处是gwt:"+ str); \}; \}-\*/;

在index.html中加入按钮以调用

现贴出application和index.html代码

package com.hw.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.RootPanel; public class TestCall implements EntryPoint \{ public void onModuleLoad() \{ Button button = new Button("java调用内部jsni的js方法"); button.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 execute("js方法被调用"); \} \}); Button button1 = new Button("内部jsni的js调用java方法"); button1.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 executeJs("java方法被调用"); \} \}); Button button2 = new Button("JAVA调用外部js"); button2.addClickHandler(new ClickHandler() \{ @Override public void onClick(ClickEvent event) \{ //gwt中java调用js方法 callOutJS("外部js被调用"); \} \}); RootPanel.get().add(button); RootPanel.get().add(button1); RootPanel.get().add(button2); outJsCallGwt(); \} /\*\* \* JSNI方法 调用外部js方法 \* @param id \*/ public static native void callOutJS(String str) /\*-\{ $wnd.callOutJs(str); \}-\*/; /\*\* \* JSNI方法 \* @param id \*/ public static native void execute(String str) /\*-\{ alert(str); \}-\*/; /\*\* \* JSNI方法, 里面调用java方法 javaAlert \* @param id \*/ public static native void executeJs(String str) /\*-\{ @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str); \}-\*/; /\*\* \* 被js方法调用 \* @param id \*/ public static void javaAlert(String str)\{ Window.alert(str); \} /\*\* \* 需要被调用的js方法 \* @param id \*/ private static native void outJsCallGwt() /\*-\{ $wnd.outJsCallGwt = function (str) \{ alert("此处是gwt:"+ str); \}; \}-\*/; \}

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="TestCall.css" mce\_href="TestCall.css"> <title>Web Application Starter Project</title> <mce:script language=JavaScript></mce:script> <mce:script type="text/javascript" language="javascript" src="testcall/testcall.nocache.js" mce\_src="testcall/testcall.nocache.js"></mce:script> </head> <body>  <iframe src="javascript:''" mce\_src="javascript:''" id="\_\_gwt\_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> <h1>Web Application Starter Project</h1> <table align="center"> <tr> <td colspan="2" style="font-weight:bold;" mce\_style="font-weight:bold;">Please enter your name:</td> </tr> <tr> <button οnclick="outJsCallGwt('外部按钮被点击')">点击</button> <td id="nameFieldContainer"></td> <td id="sendButtonContainer"></td> </tr> <tr> <td colspan="2" style="color:red;" mce\_style="color:red;" id="errorLabelContainer"></td> </tr> </table> </body> </html>

### 备注： 以上html代码中<mce:script  应该为**<****script 由于csdn代码编辑器自动改变了值** ###

1.   **<****script** language=JavaScript**>**
2.          function callOutJs(str)\{  
3.              alert('此处是外部js方法:'+ str);  
4.          \}  
5.            
6.  **<****script****>**