gwt中java与js的相互调用

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中加入外部方法

    <script language="JavaScript"><!--  
    function callOutJs(str){  
        alert('此处是外部js方法:'+ str);  
        }  
    // --></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>  
            <script language=JavaScript><!--  
            function callOutJs(str){  
                alert('此处是外部js方法:'+ str);  
            }  
              
    // --></script>  
        <script type="text/javascript" language="javascript" src="testcall/testcall.nocache.js" mce_src="testcall/testcall.nocache.js"></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 ο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>