WebView 加载网页和java 与js交互

Posted 2020-06-21 Sun‘刺眼的博客

[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]

java, 网页

<ignore_js_op>

A1302_WebView.zip