In android WebView and javascript implement data interaction instances

  • 2020-06-01 10:59:08
  • OfStack

You must have an javascript foundation before you can understand this article.

(1) js calls android's method:

WebView wView ; 
wView. addJavascriptInterface (Object obj, String interfaceName);

Is to instantiate an object, called in html's js, and the second parameter is the alias of the instantiated object, the name used in js if this obj is to be used
Is interfaceName.
public class jsWebDemo extends Activity {   
    WebView wView ;     /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);   
        wView = (WebView)findViewById(R.id.wv1);  
          
       WebSettings wSet = wView.getSettings();  
        wSet.setJavaScriptEnabled(true);          ProxyBridge pBridge = new ProxyBridge();  
        wView.addJavascriptInterface(pBridge, "AliansBridge");  
        
        wView.loadUrl("file:///android_asset/index.html");  
          
    }  
 
 private class ProxyBridge {  
  public int one () {  
   return 1;  
  }  
 }  
 
}

Let's take a look at 1. index.html:

<html>
  <mce:script language="javascript"><!--
 
        /* This function is invoked by the activity */  
        function wave() {  
            alert("1");  
            document.getElementById("droid").src="android_waving.png";  
            alert("2");  
        }  
   
// --></mce:script>
<body>     
<div id="output">Test page.</div>      <a onClick="window.demo.clickOnAndroid()">
 <div style="width:100px;  
            margin:0px auto;  
            padding:10px;  
            text-align:center;  
            border:2px solid #202020;" > 
                <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br> 
                Click me!  
        </div>
 </a>
<input type="submit" value="change to 1" onclick="document.getElementById('output').innerHTML =AliansBridge.one()" />     
</body>
</html>

Here, AliansBridge is the JAVA object being invoked.
Note that if you only have 1 method that needs to be called by js and only new1 object:
ProxyBridge pBridge = new ProxyBridge();
wView.addJavascriptInterface(pBridge, "AliansBridge");
If you need to call multiple methods, you need to instantiate the entire android class itself:
wView.addJavascriptInterface(this, "AliansBridge");
(2) android calls js method: wView.setWebChromeClient (WebChromeClient client)
To update UI, Handler mHandler = new Handler();
mWebView.setWebChromeClient(new MyWebChromeClient());                
    mWebView.addJavascriptInterface(new Object(){
    /**     
     * This is not called on the UI thread. Post a runnable to invoke     
     * loadUrl on the UI thread.     
     */       
    public void clickOnAndroid() {       
        mHandler.post(new Runnable() {        
            public void run() {        
                mWebView.loadUrl("javascript:wave()");        
            }        
        });                
    }
 }, "demo");

Similarly, in html there must be an object called demo that calls the clickOnAndroid() method.
/**      
 * Provides a hook for calling "alert" from javascript. Useful for     
 * debugging your javascript.     
 */       
final class MyWebChromeClient extends WebChromeClient {        
    @Override    
    public boolean onJsAlert(WebView view, String url, String message,     
            JsResult result) {                     
        result.confirm();      
    return super.onJsAlert(view, url, message, result);                       
    }
}


Related articles: