Android WebView 与 javascript交互

最新推荐文章于 2024-07-13 22:56:10 发布

置顶 HeBiaoBiaoBiao

最新推荐文章于 2024-07-13 22:56:10 发布

阅读量481

点赞数

文章标签： webview与js交互 webview java javascript

本文链接：https://blog.csdn.net/HeBiaoBiaoBiao/article/details/60869576

版权

有些时候为了偷懒或者业务需求，App里有时候是套网页的，好比PC 版的 QQ音乐库。点击网页里的播放为啥软件就会响应呢？道理是一样的，只不过现在主角是 Android 而已。

webView 和 javascript 交互，也就是相互调用对方的方法，也就叫做混合开发，是不是瞬间感觉高大上了。刚开始随意百度了一下，都是坑人的东西，各种代码不全有问题。谷歌

之后才看明白了，其实用起来很简单。

首先我们需要一个html5代码。这里我自己先建一个 html5 页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			
			<script type="text/javascript">
				
				function showMsg (msg){
					alert(msg)
				}
				
			</script>
			
		<title></title>
	</head>
	<body>

		<button onClick="window.demo.clickOnAndroid()">调用Android方法</button>
	</body>
</html>

activity布局

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.webview_javascript.MainActivity" >

    
    <Button android:id="@+id/showJsMethod"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示js方法"/>
    
    <Button android:id="@+id/shuaxin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="刷新网页"/>

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

</LinearLayout>

MainActivity.java

package com.example.webview_javascript;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

	private WebView web;
	private Button showJsMethod;
	private Button shuaxin;
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		web = (WebView) findViewById(R.id.webView);
		showJsMethod = (Button) findViewById(R.id.showJsMethod);
		shuaxin = (Button) findViewById(R.id.shuaxin);

		shuaxin.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {

				web.loadUrl("http://192.168.0.2:8020/HelloHBuilder/index.html");
			}
		});

		showJsMethod.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				web.loadUrl("javascript:showMsg(\"我是Android调用的\")");

			}
		});

		WebSettings webSettings = web.getSettings();
		web.setWebChromeClient(new WebChromeClient() {
		});
		webSettings.setJavaScriptEnabled(true);
		webSettings.setSupportZoom(false);
		web.loadUrl("http://192.168.0.2:8020/HelloHBuilder/index.html");
		web.addJavascriptInterface(new DemoJavaScriptInterface(this, web),
				"demo");
		web.setWebViewClient(new WebViewClient() {
			@Override
			public void onPageFinished(WebView view, String url) {
				super.onPageFinished(view, url);
				// 在这里执行你想调用的js函数
				Log.i("", "web_网页加载完成");
			}
		});
	}

}

DemoJavaScriptInterface.java

package com.example.webview_javascript;

import android.content.Context;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class DemoJavaScriptInterface {

	private Context context;
	private WebView web;
	private Handler mHandler = new Handler();
	
    DemoJavaScriptInterface(Context context,WebView web) {
    	this.context = context;
    	this.web = web;
    }

    /**
     * This is not called on the UI thread. Post a runnable to invoke
     * loadUrl on the UI thread.
     */
    @JavascriptInterface
    public void clickOnAndroid() {
    	Toast.makeText(context, "点击了", Toast.LENGTH_SHORT).show();
    	
    	

    }
}

注意 : web.addJavascriptInterface(new DemoJavaScriptInterface(this, web),"demo");

上面的demo 可以说是把接口开放给js 并且起个名字， js里就可以 <button onClick="window.接口名字.你的方法名">调用Android方法</button> 来调用，一般情况下，如果想要获取 js 之后过后的返回值，可以通过js调用java方法传回来。如果发现alert 弹不出来请确保你是在网页加载完成后调用的。

HeBiaoBiaoBiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android WebView 与 javascript交互

有些时候为了偷懒或者业务需求，App里有时候是套网页的，好比PC 版的 QQ音乐库。点击网页里的播放为啥软件就会响应呢？道理是一样的，只不过现在主角是 Android 而已。 webView 和 javascript 交互，也就是相互调用对方的方法，也就叫做混合开发，是不是瞬间感觉高大上了。刚开始随意百度了一下，都是坑人的东西，各种代码不全有问题。谷歌之后才看明白了，其
复制链接

扫一扫