这篇文章主要围绕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交互)
- android webview js交互, 响应webview中的图片点击事件
- Android WebView 与网页 JS 相互调用
- android WebView 和js互调用的使用说明。
- Android WebView上实现JavaScript与Java交互
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中的图片点击事件

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>
希望对大家有所帮助
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交互
其实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交互等更多相关知识的信息可以在本站进行查询。
本文标签: