java js通讯 webview_WebView 加载网页和java 与js交互

[mw_shl_code=java,true]WebView是一个可以显示网页的控件。

需求：

通过WebView加载assets下的html文件。

实现页面的缩放。

向menu键添加：前进、后退和刷新，实现对网页的操作

点击网页中的链接，仍然使用本WebView浏览器，而非调用系统的浏览器

网页中有button，点击button，调用android的Toast

点击WebView隐藏地址栏和button，点击menu键显示地址栏和button。

WebView加载网页的方式

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

webview.loadUrl(" http://192.168.1.33:8080/  ");----访问本地服务器(如tomcat)的网页。

webview.loadUrl("http://www.baidu.com");------访问网络的的网页

webview.loadUrl(" file:///android_asset/test.html  ");---------访问本工程下assets下的html文件。。。。注意： file:///android_asset/是固定写法。

添加权限：“android.permission.INTERNET”

WebView的常用方法(介绍的是方法的作用，没有写参数，具体的方法使用在下面的示例中)

webview.setWebChromeClient();该方法可以处理进度条对话框等。

webview.setOnTouchListener();WebView设置触摸事件，比如我触摸屏幕时，可以隐藏地址栏等操作。

webview.setWebViewClient(WebViewClient client);设置该方法后，一旦你点击网页中的链接，不会去调用系统的浏览器，而是仍然使用当前的WebView浏览器。实现参数的匿名内部类

覆盖匿名内部类的方法 shouldOverrideUrlLoading(WebView view, String url)，在该方法view.load(url);

onPageStarted():在网页加载前可以做的一些操作，比如加载网页需要一些时间，那么我们就让这段时间显示进度条或提示一句话"正在加载中"

onPageFinished():在网页加载后可以做的一些操作，比如关闭进度条。

WebSettings settings = webview.getSettings():就是WebView浏览器的一些设置。

设置网页的缩放：settings.setBuiltInZoomControls(true);也就是放大和缩小网页。

settings.setJavaScriptEnabled(true):可以让android和html中的javascript进行交互。

返回键：当我们打开多个Activity，一旦点击返回键，就直接退出WebView浏览器了。然而这不是我们想要的结果，我们想要的是一点击返回键，我们退回上一个页面。这时我哦们就需要重写onKeyDown()方法。

------7,8,9三条选看，是关于menu键的内容，网页的前进、后退和刷新-------

点击menu键：我们添加几个menu，实现网页的前进 后退和刷新功能。onCreateOptionsMenu();

为menu的item添加点击事件，实现前进，后退和刷新功能的具体实现方法。

点击一次menu，执行一次的方法：onPrepareOptionMenu()

android与javascript的交互：(在javascript中调用android代码)

背景：WebView加载了一个带button的html，我想点击该按钮调用android的吐司。

html代码：test.html的内容(html是非严谨的，因此如下直接复制就可以)

call java

function demoTest(){

window.demo.demoTest("hello android i am javaScript");

}

android内必须添加的代码：

//可以让android与javascript进行交互

settings.setJavaScriptEnabled(true);

//让javascript调用java代码时，需要添加如下android代码

webview.addJavascriptInterface(new Object(){

public void demoTest(String msg){

showToast(msg);

}

}, "demo");

public void showToast(String str){//弹出吐司的方法

Toast.makeText(MainActivity.this, str, 0).show();

}

流程概述：

点击按钮：  执行：button的点击事件οnclick="demoTest();"

点击事件demoTest();---->调用javascript代码的方法，执行window.demo.demoTest("hello android i am javaScript")

然后调用：android的"demo"接口的方法：public void demoTest(String msg){

showToast(msg);

}

showToast(msg),调用弹出吐司方法

这就是点击button调用android代码

关于android与javascript的直白理解：通过 settings.setJavaScriptEnabled(true);  方法设置android和javascript可以交互，在android中通过 webview.addJavascriptInterface(参数一：参数二) 方法 定义一个接口名称(参数二)，通过该接口名称可以在javascript中调用该接口代表的对象的方法(参数一)。更啰嗦的说就是：参数一：new Object(){

public void demoTest(String msg){

showToast(msg);

}定义了一个匿名内部类，该匿名内部类中定义了一个方法demoTest(String msg)。参数二：为该匿名内部类其的名字，通过该名字可以调用匿名内部类中定义的方法，并且必须是在javasrript中调用：调用方式：window.参数二.参数一方法名(参数)

在java中调用javascript代码：

首先需要在html中有script代码块，并且在script中定义了方法。

我们需要做的就在java中调用javascript中的方法

如何调用：WebView.loadUrl("javascript:方法名");

源码：test.html-------------该文件一定要放到assets下

*****************************

test.html

call java

function demoTest(){

window.demo.demoTest("hello android i am javaScript");

}

布局文件:********************************************************8

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:id="@+id/ll_tool"

android:layout_width="fill_parent"

android:layout_height="wrap_content" >

android:id="@+id/et"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="http://192.168.1.111" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="search"

android:text="search" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="calljs"

android:text="calljs" />

android:id="@+id/webview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1" />

android代码：-----------------------********************************************

package com.example.a1302_webview;

import android.app.Activity;

import android.app.ProgressDialog;

import android.graphics.Bitmap;

import android.os.Bundle;

import android.view.KeyEvent;

import android.view.Menu;

import android.view.MenuItem;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.EditText;

import android.widget.LinearLayout;

import android.widget.Toast;

public class MainActivity extends Activity {

private WebView webview;

private EditText et;

private ProgressDialog pd;

private LinearLayout ll_tool;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

et = (EditText) findViewById(R.id.et);

pd = new ProgressDialog(this);//进度条

ll_tool = (LinearLayout) findViewById(R.id.ll_tool);

//处理进度条、js对话框等时使用

webview.setWebChromeClient(new WebChromeClient(){

@Override

public void onProgressChanged(WebView view, int newProgress) {

// TODO Auto-generated method stub

super.onProgressChanged(view, newProgress);

pd.setMessage("正在快速加载"+newProgress+"%");

}

});

//为WebView设置触摸事件,触摸屏幕时 因此地址栏和按钮

webview.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

// TODO Auto-generated method stub

if(ll_tool.isShown()){

ll_tool.setVisibility(View.GONE);

}

return false;

}

});

//防止调用系统浏览器

/*

* 用setWebViewClient方法设置webView客户端，用于接收webView发出的请求，通常的用法是覆盖其中的方法，

* 自己处理相关的事件，如：shouldOverrideUrlLoading(WebView view, String url)；在自身webView中打开新的超链接。

*/

webview.setWebViewClient(new WebViewClient(){

//设置页面加载前的事件

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

// TODO Auto-generated method stub

super.onPageStarted(view, url, favicon);

pd.show();

}

//设置页面加载后的事件

@Override

public void onPageFinished(WebView view, String url) {

// TODO Auto-generated method stub

super.onPageFinished(view, url);

//                                pd.cancel();

pd.dismiss();

}

});

//给 屏幕添加缩放

/*

当webView对象构造生成时，便会生成一个默认的webset对象，里面包含了默认的设置，

可以用webSet = webView.getSettings();取得webset的引用，并对其进行修改。

*/

WebSettings settings = webview.getSettings();

//该行代码写不写都可以，因为默认的是true，表示是否支持缩放

settings.setSupportZoom(true);

//缩放的设置

settings.setBuiltInZoomControls(true);

//即时缩放,设置初始比例

//                webview.setInitialScale(50);

//                //

//                webview.zoomIn();

//                webview.zoomOut();

//可以让android与javascript进行交互

settings.setJavaScriptEnabled(true);

//让javascript调用java代码时，需要添加如下android代码

webview.addJavascriptInterface(new Object(){

public void demoTest(String msg){

showToast(msg);

}

}, "demo");

}

public void showToast(String str){

Toast.makeText(MainActivity.this, str, 0).show();

}

//在menu菜单增加几个选项

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

//参数三：order号码，可以通过getOrder标示该选项

menu.addSubMenu(0,0,0,"刷新");//0刷新

menu.addSubMenu(0,0,1,"前进");//1前进

menu.addSubMenu(0,0,2,"后退");//2后退

return true;

}

//为menu裁断添加item选中事件

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// TODO Auto-generated method stub

switch (item.getOrder()) {//menu.addSubMenu(0,0,0,"刷新");获得的是第三个参数order

case 0:

webview.reload();//刷新

break;

case 1:

if(webview.canGoForward()){

webview.goForward();//前进

}

break;

case 2:

if(webview.canGoBack()){

webview.goBack();//后退

}

break;

default:

break;

}

return super.onOptionsItemSelected(item);

}

//点击menu时显示地址栏和按钮,点击menu键一次执行一次该方法

@Override

public boolean onPrepareOptionsMenu(Menu menu) {

// 点击menu键显示地址栏和按钮

ll_tool.setVisibility(View.VISIBLE);

return super.onPrepareOptionsMenu(menu);

}

//点击事件，搜寻网址

public void search(View v){

/*

* loadUrl()方法webView加载页面，可以是url = "http://192.168.1.33:8080/"

* 或 本地页面"file:///android_asset/index.html" webView1.loadUrl(url);

*/

String url = "file:///android_asset/test.html" ;

//                String url = et.getText().toString().trim();

webview.loadUrl(url);

}

//点击返回键，不退出应用，而是回到上一个页面

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

// TODO Auto-generated method stub

if(keyCode==KeyEvent.KEYCODE_BACK&&webview.canGoBack()){

webview.goBack();

return true;

}else{

return super.onKeyDown(keyCode, event);

}

}

//在java中调用javascript中的方法

//调用方式：webview.loadUrl("javascript:方法名");

public void calljs(View v){

webview.loadUrl("javascript:demoTest()");

}

}

[/mw_shl_code]