WebView 加载网页和java 与js交互

Posted Sun‘刺眼的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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是非严谨的,因此如下直接复制就可以)
<button>call java</button>    
<script type="text/javascript">
        function demoTest(){
                window.demo.demoTest("hello android i am javaScript");        
        }
</script>
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的点击事件onclick="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
<button>call java</button>
        <script type="text/javascript">
                function demoTest(){
                        window.demo.demoTest("hello android i am javaScript");        
                }
        </script>

布局文件:********************************************************8
<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:orientation="vertical" >
    <LinearLayout
        android:id="@+id/ll_tool"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <!-- 地址栏 -->
        <EditText
            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" />
        <!-- 点击搜索 ,用WebView加载网页 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="search"
            android:text="search" />
        <!-- java代码调用javascript的代码 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="calljs"
            android:text="calljs" />
    </LinearLayout>
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />
</LinearLayout>



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]
<ignore_js_op>
技术分享

A1302_WebView.zip

以上是关于WebView 加载网页和java 与js交互的主要内容,如果未能解决你的问题,请参考以下文章

安卓Webview 与 vue h5 使用js交互

Android WebView 加载超长 JS 数据

androidwebview加载本地js怎么实现交互

安卓开发webview与js交互

怎么用WebView加载本地html

javafx webview js交互问题