GWT开发——java 与 js 通过 jsni 相互调用

本文主要是介绍GWT开发——java 与 js 通过 jsni 相互调用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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"><!--  
 function callOutJs(str){  
     alert('此处是外部js方法:'+ str);  
     }  
 // --></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中加入按钮以调用

  <button οnclick="outJsCallGwt('外部按钮被点击')">点击</button>  
 

现贴出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><!--  
         function callOutJs(str){  
             alert('此处是外部js方法:'+ str);  
         }  
           
 // --></mce:script>  
     <mce:script type="text/javascript" language="javascript" src="testcall/testcall.nocache.js" mce_src="testcall/testcall.nocache.js"></mce:script>  
   </head>  
   <body>  
     <!-- OPTIONAL: include this if you want history support -->  
     <iframe src="javascript:''" mce_src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  
       
     <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->  
     <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 onclick="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>  
 