GVKun编程网logo

webview Java与JS互调(webview与js交互)

18

这篇文章主要围绕webviewJava与JS互调和webview与js交互展开,旨在为您提供一份详细的参考资料。我们将全面介绍webviewJava与JS互调的优缺点,解答webview与js交互的相

这篇文章主要围绕webview Java与JS互调webview与js交互展开,旨在为您提供一份详细的参考资料。我们将全面介绍webview Java与JS互调的优缺点,解答webview与js交互的相关问题,同时也会为您带来android webview js交互, 响应webview中的图片点击事件、Android WebView 与网页 JS 相互调用、android WebView 和js互调用的使用说明。、Android WebView上实现JavaScript与Java交互的实用方法。

本文目录一览:

webview Java与JS互调(webview与js交互)

webview Java与JS互调(webview与js交互)

 Android调用JS:方法一

webView.loadUrl("javascript:show(''"+info+"'')");

Android调用JS:方法二 

//第一个参数为js中的方法名,该段代码每执行一次则调用js方法一次
progressWebView.getWebview().evaluateJavascript("window.hasUserEditData()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
            //这里为返回值
                    boolean hasChanged = Boolean.parseBoolean(value);
                    //todo
                }
            });

 JS调用Android

webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JSHook(), "hello");

 

android webview js交互, 响应webview中的图片点击事件

android webview js交互, 响应webview中的图片点击事件

    转载请注明出处
        挺帅的移动开发专栏   http://blog.csdn.net/wangtingshuai/article/details/8635787
     最近碰到个新需求需要点击webview中的图片进行放大显示。
整理了下思路,想到了下面的一个可行的方案。

方案思路,
1.在点击图片的时候调用本地的java方法并给出响应的图片地址
2.本地获得图片地址后,开启一个遮罩activity进行显示和处理

第二步的实现很容易实现,关键是第一步的实现,在网页中点击图片不会调用本地的java代码。那么我们需要给这个点击事件加上相应的js函数,让点击事件调用的js函数来调用我们提前准备好的java函数,等我们捕获到图片的url剩下的就好处理了。
关键点就是给普通的html注入我们的js函数,让图片能够响应点击并调用js函数,在通过js函数来调用我们的java函数。听起来好像有点绕,不过也不难,下面我们用代码实现下

对java和js交互还不熟悉的同学,请参照前面的文章
http://blog.csdn.net/wangtingshuai/article/details/8631835

这次实例的主要功能:点击图片在新的activity中展示,对图片能够进行手势操作,包括双指缩放等
效果图

加载webview的activity代码  

package wst.webview;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

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

	private WebView contentWebView = null;

	@SuppressLint("SetJavaScriptEnabled")
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		contentWebView = (WebView) findViewById(R.id.webview);
		// 启用javascript
		contentWebView.getSettings().setJavaScriptEnabled(true);
		// 随便找了个带图片的网站
		contentWebView.loadUrl("http://www.weim.me/12408.html");
		// 添加js交互接口类,并起别名 imagelistner
		contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
		contentWebView.setWebViewClient(new MyWebViewClient());

	}

	// 注入js函数监听
	private void addImageClickListner() {
		// 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
		contentWebView.loadUrl("javascript:(function(){" +
		"var objs = document.getElementsByTagName(\"img\"); " + 
				"for(var i=0;i<objs.length;i++)  " + 
		"{"
				+ "    objs[i].onclick=function()  " + 
		"    {  " 
				+ "        window.imagelistner.openImage(this.src);  " + 
		"    }  " + 
		"}" + 
		"})()");
	}

	// js通信接口
	public class JavascriptInterface {

		private Context context;

		public JavascriptInterface(Context context) {
			this.context = context;
		}

		public void openImage(String img) {
			System.out.println(img);
			//
			Intent intent = new Intent();
			intent.putExtra("image", img);
			intent.setClass(context, ShowWebImageActivity.class);
			context.startActivity(intent);
			System.out.println(img);
		}
	}

	// 监听
	private class MyWebViewClient extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			return super.shouldOverrideUrlLoading(view, url);
		}

		@Override
		public void onPageFinished(WebView view, String url) {

			view.getSettings().setJavaScriptEnabled(true);

			super.onPageFinished(view, url);
			// html加载完成之后,添加监听图片的点击js函数
			addImageClickListner();

		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			view.getSettings().setJavaScriptEnabled(true);

			super.onPageStarted(view, url, favicon);
		}

		@Override
		public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

			super.onReceivedError(view, errorCode, description, failingUrl);

		}
	}

}

展示图片的activity代码

package wst.webview;

import java.io.IOException;
import java.io.InputStream;
import java.net.URL;

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.TextView;

public class ShowWebImageActivity extends Activity {
	private TextView imageTextView = null;
	private String imagePath = null;
	private ZoomableImageView imageView = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.show_webimage);
		this.imagePath = getIntent().getStringExtra("image");

		this.imageTextView = (TextView) findViewById(R.id.show_webimage_imagepath_textview);
		imageTextView.setText(this.imagePath);
		imageView = (ZoomableImageView) findViewById(R.id.show_webimage_imageview);

		try {
			imageView.setImageBitmap(((BitmapDrawable) ShowWebImageActivity.loadImageFromUrl(this.imagePath)).getBitmap());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	public static Drawable loadImageFromUrl(String url) throws IOException {

		URL m = new URL(url);
		InputStream i = (InputStream) m.getContent();
		Drawable d = Drawable.createFromStream(i, "src");
		return d;
	}
}


图片布局文件 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- TODO 默认占位图 -->

    <wst.webview.ZoomableImageView
        android:id="@+id/show_webimage_imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="matrix"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/show_webimage_imagepath_textview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#ffff0000" />

</LinearLayout>

希望对大家有所帮助
源代码附上
http://download.csdn.net/detail/wangtingshuai/5109179


Android WebView 与网页 JS 相互调用

Android WebView 与网页 JS 相互调用

OSC 请你来轰趴啦!1028 苏州源创会,一起寻宝 AI 时代
在 Android 中的写法: public void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); setContentView (R.layout.main); final WebView web1=(WebView) findViewById (R.id.web1); final Button mybutton=(Button) findViewById (R.id.myButton); Handler h = new Handler ();// 声明一个传值的参数 web1.getSettings ().setJavaScriptEnabled (true);// 确定这个 webview 可以用 JS web1.addJavascriptInterface (new A (), "to2");// 将本类对象添加到 JS 的全局对象 window 中. web1.loadUrl ("file:///android_asset/test.html");// 这个是加载本工程的 HTML 地址,放在 assets 文件夹中 WebViewClient webclient=new WebViewClient (){   @Override public void onPageFinished (WebView view, String url) { // TODO Auto-generated method stub super.onPageFinished (view, url); } }; web1.setWebViewClient (webclient); } class A { public void a (){ 这里做相应的逻辑操作。 } 在 html 当中的写法 <title > 无标题文档 </title> <script type="text/javascript"> function f2 (){ return window.to2.a (); } </script> </head>   <body> <table align="center" width="724px" height="600px"> <tr align="center"> <td align="center"> <input name="submit" type="submit" value="跳转"  onclick="return f2 ()" /> </td> </tr> </table> </body> </html>

android WebView 和js互调用的使用说明。

android WebView 和js互调用的使用说明。

这段时间公司同事他们要求讲点android方面的知识(ps:我同事他们都是做PHP的),然后不知道怎么讲才能让他们感兴趣,所以就找了一些WebView的例子跟他们讲了下,下面就是一些关于android调用HTML中js方法和HTML调用android这边的方法的操作。

1,首先大家要知道第一步操作,建立权限,WebView访问是需要访问网络的,所以首先大家不要忘记了在androidmanifest.xml中配置网络权限:

<uses-permission android:name="android.permission.INTERNET"/>
2,android中利用webview调用网页上的JS代码,

android中可以通过webview来实现和JS的交互,在程序中调用js代码,只需要将webivew控件支持的js属性设置为true,然后通过loadUrl就可以直接进行调用,如下:

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.loadUrl("javascript:test()");//调用页面中test JS方法
3,页面上需要调用java代码的方法,在网页中调用java代码,需要在webview控件中添加javascriptInterface。如下所示:

mWebView.addJavascriptInterface(new Object() { 

            public void clickOnAndroid() { 

                mHandler.post(new Runnable() { 

                    public void run() { 

                        Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();

                    } 

                }); 

            } 

        }, "demo");
在网页中,只需要像调用JS方法一样,进行调用就可以:

<div id=''b''><a onclick="window.demo.clickOnAndroid()">b.c</a></div>
4,java代码调用JS并传参

首先一样需要带参数的函数形式,但需要注意此处的参数需要final类型,即得到以后不可修改,如果需要修改其中的值,可以先设置中间变量,然后进行修改,如下所示:

mWebView.addJavascriptInterface(new Object() { 
            public void clickOnAndroid(final int i) { 
                mHandler.post(new Runnable() { 
                    public void run() { 
                                int j = i;
                                j++;
                Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();
                    }
                });
            } 
        }, "demo");
然后在HTML页面中,利用如下代码:

<div id=''b''><a onclick="window.demo.clickOnAndroid(2)">b.c</a></div>
即可以实现互调,

5,下面让我们来看一个实例:

将我们需要的HTML代码预先写好放到assets文件夹下面:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<style>
        body{ background:none repeat scroll 0 0 #F8F8F8;}
    </style>
     </head>
    <body>
    
	 <divmain panel-body''>
		<div>
		<h2>超级管理后台</h2>
			<form id="login"method="post" role="form" >
				<div>
					<input type="text"placeholder="用户名" name="username" id="username">
				</div>
				<div>
					<input type="password"name="password" placeholder="密码" id="password">
				</div>
				<div>
					<buttononClick="window.login.startFunction()" href="";>登录
					
				</div>
			 </form>
		</div>
	</div>
	<span id="content"></span>
	<script type="text/javascript">
		function updateHtml(){
	 		document.getElementById("content").innerHTML = "你通过 android 中的控件调用了html 中js 的方法";
			alert("dialog");
		}
		
	</script>
    </body>
</html>
然后就是java代码:

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

public class WordActivity extends Activity {
    /** Called when the activity is first created. */
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.asd);
        //获取webView 控件
       final WebView webview=(WebView)findViewById(R.id.webView1);
        //加上这句话才能使用javascript方法  
        webview.getSettings().setJavaScriptEnabled(true);
       //webview.loadUrl("http://128.128.191.62/cn/mobile/geturl.html");
        //加载assets目录下面的demo.html 界面
        webview.loadUrl("file:///android_asset/index2.html");
        //增加接口方法,让html页面调用  
        webview.addJavascriptInterface(this,"login");  
        Button button = (Button)findViewById(R.id.button1);
        button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				webview.loadUrl("javascript:updateHtml()");
			}
		});
    }
    
    public void startFunction(){
    	AlertDialog.Builder ab=new AlertDialog.Builder(WordActivity.this);
		ab.setTitle("提示");
		ab.setMessage("通过js 调用了 java 中的方法");
		ab.setPositiveButton("确定", new DialogInterface.OnClickListener()
		{
			@Override
			public void onClick(DialogInterface dialog, int which) {
				dialog.dismiss();
			}
		});
		ab.create().show();
    }
}



Android WebView上实现JavaScript与Java交互

Android WebView上实现JavaScript与Java交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢。图片、css 、js 、html这些资源每个大概需要10-200ms,一般都是30ms就ok了。不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css、js文件和页面上的图片资源进行加载。如果webkit的缓存里面有,就不加载。加载完这些资源之后,就进行css的渲染和js的执行。Css的渲染一般不需要很长时间,几十毫秒就ok。关键是js的执行,如果用了jQuery,则执行起来需要5-6秒。而在这段时间,如果不在webview里设置背景,网页部分是白色的,很难看。这是一个很糟糕的用户体验。所以#欧#柏泰#克建议如果用网页布局程序,最好别用那些庞大的js框架。最好使用原生的js写业务脚本,以提升加载速度,改善用户体验。

在混合开发中,有时会用到安卓原生SDK,如调用相机、查看相册、录音等,这就需要web页面中的JavaScript能调用到安卓SDK接口。由于Android的WebView是基于webkit内核的,集成了js与java互调的接口函数,可以方便地进行开发使用。

界面布局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" >
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout"
/>
<LinearLayout 
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java调用JavaScript接口"
>
</Button>
</LinearLayout>
</RelativeLayout> 

java代码:

private WebView webView;
private Handler handler = new Handler();
private Button button;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
//自定义webView设置
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyJavaScriptInterface(MainActivity.this),"javaInterface");
//如果注释了,javaScript中的alert弹窗等就会失效,不显示
webView.setWebChromeClient(new WebChromeClient());
//webView.setWebChromeClient(new MyWebChromeClient());
//测试webView加载是否正常
//webView.loadUrl("http://www.baidu.com/");
webView.setWebViewClient(new HelloWebView());
webView.loadUrl("file:///android_asset/index.html");
button = (Button) findViewById(R.id.btn);
button.setonClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
private class HelloWebView extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view,String url) {
// Todo Auto-generated method stub
view.loadUrl(url);
return true;
} 
}
/**
* 在主线程中定义JavaScript可以调用的安卓接口
* @author CHQ
* API 以后,每个被调用java函数都要叫声明 @JavascriptInterface
*/
public class MyJavaScriptInterface{
private Context context;
public MyJavaScriptInterface(Context context){
this.context = context;
}
@JavascriptInterface
public String toString() {
return "this is interface";
}
@JavascriptInterface
public void clickOnAndroid() {
Toast.makeText(context,"js调用安卓:....",Toast.LENGTH_SHORT).show();
}
/**
* 安卓调用JS接口,要开启子线程调用
*/
@JavascriptInterface
public void call() {
Toast.makeText(context,"安卓客户端再调用JavaScript接口",Toast.LENGTH_SHORT).show();
handler.post(new Runnable() { 
@Override
public void run() {
String param = "bb";
webView.loadUrl("javascript:showTitle('"+param+"')");
}
});
}
}

其中:有几点必须注意的,网上早期关于WebView的描述中,有几点变化。1)安卓4.2以上的版本中使用WebView实现Java与Js互调,java接口需要声明@JavascriptInterface ; 2)WebView要调用setWebChromeClient(),以适应Js等弹窗等实现;3)addJavascriptInterface中绑定的接口中调用JavaScript接口,需要开启子线程来调用(报错:Caused by: java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread. );

HTML代码:

<html>
<script type="text/javascript">
//安卓定义的接口1
function callAndroidInterface() {
window.javaInterface.clickOnAndroid();
}
//
function showTitle(param) {
alert("传参:"+param);
var x = document.getElementById("title");
alert("标题:"+x.innerHTML);
}
</script>
<body>
<h3 id="title">关于安卓与JavaScript的交互</h3>
<input type="button" value="调用接口1" onclick="callAndroidInterface()"></input> 
<input type="button" value="测试接口可用性" onclick="showTitle('aa')"></input> 
<input type="button" value="调用接口2" onclick="window.javaInterface.call()"></input>
</body>
</html> 

以上html文件,其中javaInterface就是webView中addJavacriptInterface()方法中注入的接口入口名称,通过该名称就可以直接调用Java中的接口。(该html页面需要保持到项目assets目录中,由webView.loadUrl("file:///android_asset/index.html")来加载);

效果图:

其中,对话框弹出:网址为"file://"的网页显示:,如果是服务器上的web页面就会显示源IP地址等等,显然不是我们想要的。下一篇,我们可以重写WebChromeClient来修改对话框、确认框等webView的优化。

以上内容是针对Android WebView上实现JavaScript与Java交互的全部内容,希望对大家有所帮助!

今天关于webview Java与JS互调webview与js交互的介绍到此结束,谢谢您的阅读,有关android webview js交互, 响应webview中的图片点击事件、Android WebView 与网页 JS 相互调用、android WebView 和js互调用的使用说明。、Android WebView上实现JavaScript与Java交互等更多相关知识的信息可以在本站进行查询。

本文标签: