WebView 如何和 JS交互

最新推荐文章于 2023-03-21 15:23:47 发布

squeue623

最新推荐文章于 2023-03-21 15:23:47 发布

阅读量331

点赞数

本文链接：https://blog.csdn.net/zhangleiyu623/article/details/49736029

版权

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。

webview有两个方法：setWebChromeClient 和 setWebClient

setWebClient：主要处理解析，渲染网页等浏览器做的事情

setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等

WebViewClient就是帮助WebView处理各种通知、请求事件的。

一、WebView 如何js 交互。 js 如何调Android 方法，Android 如何调js方法。

1.将 demo.html 放在 assets目录下

WebView webview = (WebView) findViewById(R.id.webview);

webview.loadUrl("file:///android_asset/demo.html");

2.如果页面有JavaScript 方法，则webview必须设置支持JavaScript

wst.setJavaScriptEnabled(true);

代码如下：

MainActivity.java

package com.example.webviewdemo;

import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnKeyListener;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;


public class MainActivity extends ActionBarActivity {

	private WebView webview;
	
	private Handler handler = new Handler();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
	    webview = (WebView) findViewById(R.id.webview);
	    
	    
	    WebSettings wst = webview.getSettings();
	    wst.setSavePassword(false);
	    wst.setSaveFormData(false);
	    wst.setJavaScriptEnabled(true);
	    wst.setSupportZoom(false);
	    
	    webview.setWebChromeClient(new MyWebChromeClient());
	    
	    webview.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
	    
	    webview.loadUrl("file:///android_asset/demo.html");
	}
   final class DemoJavaScriptInterface{
       DemoJavaScriptInterface(){
    		
    	}
 </span><span style="color:#ff0000;">      @JavascriptInterface</span><span style="color:#393939;">
    	public void clickOnAndroid(){
    		handler.post(new Runnable() {
				
		 @Override
		 public void run() {
		      webview.loadUrl("javascript:wave()");
		          }
			});
    	}
    }
	final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        	
		      final AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());  
              
		      builder.setTitle("")  
		                .setMessage(message)  
		                .setPositiveButton("确定", null);  
		                  
		        // 不需要绑定按键事件  
		        // 屏蔽keycode等于84之类的按键  
		        builder.setOnKeyListener(new OnKeyListener() {  
		            public boolean onKey(DialogInterface dialog, int keyCode,KeyEvent event) {  
		            //    Log.v("onJsAlert", "keyCode==" + keyCode + "event="+ event);  
		                return true;  
		            }  
		        });  
		        // 禁止响应按back键的事件  
		        builder.setCancelable(false);  
		        AlertDialog dialog = builder.create();  
		        dialog.show();  
            result.confirm();
            return true;
        }
    }
}</span>

HTML页面，demo.html

<!doctype html>
<html >
 <head>
  <script language="javascript">
     function wave(){
            document.getElementById("droid").src="android_waving.png";
            alert("android 调 js");
	 }
  </script>
 </head>
 <body>
  
     <a onClick="window.demo.clickOnAndroid()">
	   <div style="width:80px;margin:0px auto;pandding:10px;
	   text-align:center;border:2px solid #ff0000">
	      <img id="droid" src="android_normal.png"/></br>
		  click me!
	   </div>
	 </a>
 </body>
</html>

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.webviewdemo.MainActivity" >

    <WebView 
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        /> 

</RelativeLayout>

二、分析一下 Android 和 js 如何交互的呢？

1.Android 调 js 方法

    webview.loadUrl("javascript:wave()");</span>

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

2.JS 如何调Android的方法

代码中的“demo”是在android中指定的调用名称，即

webview.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

其中clickOnAndroid() 是对象 DemoJavaScriptInterface 的方法

squeue623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView 如何和 JS交互

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。webview有两个方法：setWebChromeClient 和 setWebClientsetWebClient：主要处理解析，渲染网页等浏览器做的事情setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等 WebVi
复制链接

扫一扫