目錄
与js互调
让js调用Android代码
实现利用返回键返回到上一页:
WebView 缓存
WebView 删除缓存
WebView 处理 404 错误
判断 WebView 是否已经滚动到页面底端
WebView获取服务器中的 session 问题
WebView清除本地cookies
首頁 web前端 html教學 Android 有关 WebView 的一些使用方法_html/css_WEB-ITnose

Android 有关 WebView 的一些使用方法_html/css_WEB-ITnose

Jun 21, 2016 am 08:47 AM

Android系统中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件。

在开发过程中应该注意几点:

1.这是最基本的 AndroidManifest.xml 中必须添加访问网络权限。

2.如果访问的页面中有 Javascript,则 WebView 必须设置支持 Javascript。

WebView.getSettings().setJavaScriptEnabled(true);
登入後複製

3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 WebView的WebViewClient对象。

mWebView.setWebViewClient(new WebViewClient(){    public boolean shouldOverrideUrlLoading(WebView view, String url){         view.loadUrl(url);        return true;    }});
登入後複製

4.如果不做任何处理 ,浏览网页,点击系统“Back”键,整个 Browser 会调用 finish()而结束自身,如果希望浏览的网页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该 Back 事件

public boolean onKeyDown(int keyCode, KeyEvent event) {    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) {         mWebView.goBack();        return true;    }    return super.onKeyDown(keyCode, event);}
登入後複製

与js互调

既然可以显示网页,那么当然也可以让网页操作本地方法。(由于一行写不下,缩进我调整了一下)

public class WebViewDemo extends Activity {     private WebView mWebView;    private Handler mHandler = new Handler();     public void onCreate(Bundle icicle) {     setContentView(R.layout.WebViewdemo);    mWebView = (WebView) findViewById(R.id.WebView);     WebSettings webSettings = mWebView.getSettings();     webSettings.setJavaScriptEnabled(true);     mWebView.addJavascriptInterface(new Object() {      public void clickOnAndroid() {          mHandler.post(new Runnable() {              public void run() {                   mWebView.loadUrl("javascript:wave()");              }          });      }    }, "demo");     mWebView.loadUrl("file:///android_asset/demo.html");     }}
登入後複製

我们看 addJavascriptInterface(Object obj,String interfaceName)这个方法 ,该方法将一个java对象绑定到一个javascript对象中,javascript对象名就是 interfaceName(demo),作用域是Global.这样初始化 WebView 后,在WebView加载的页面中就可以直接通过javascript:window.demo访问到绑定的java对象了. 来看看在html中是怎样调用的.

<html><script language="javascript">  function wave() {    document.getElementById("droid").src="android_waving.png";  }</script><body>  <a onClick="window.demo.clickOnAndroid()">  <img  src="/static/imghw/default1.png"  data-src="android_normal.png"  class="lazy"  id="droid" mce_/ alt="Android 有关 WebView 的一些使用方法_html/css_WEB-ITnose" ><br> Click me! </a></body></html>
登入後複製

这样在 javascript 中就可以调用 java 对象的 clickOnAndroid()方法了,同样我们可以在此对象中定义很多方法(比如发短信,调用联系人列表等手机系统功能),这里 wave()方法是 java 中调用 javascript 的例子.

需要说明一点:addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中,不能运行在构造他的线程中,这也是使用 Handler 的目的.

让js调用Android代码

首先简述 WebView、WebViewClient、WebChromeClient 之间的区别:

在 WebView 的设计中,不是什么事都要 WebView类干的,有些杂事是分给其他人的,这样 WebView 专心干好 自己的解析、渲染工作就行了.WebViewClient 就是帮助 WebView 处理各种通知、请求事件等 ,WebChromeClient 是辅助 WebView 处理 Javascript 的对话框,网站图标,网站 title.

功能实现:

利用 android 中的 WebView 加载一个 html 网页,在 html 网页中定义一个按钮,点击按钮弹出一 个 toast.

实现步骤:

首先定义一个接口类,将上下文对象传进去,在接口类中定义要在 js 中实现的方法。

接着在assets资源包下定义一个 html 文件,在文件中定义一个 button.button 的点击事件定义为一个 js 函数.

之后在 xml 中定义一个 WebView 组件,在活动类中获取 WebView 并对 WebView 参数进行设置,此处特别注意要设置 WebView 支持 js 且将定义的 js 接口类添加到 WebView 中去,此后在 js 中就可以利用该接口类中定义的 函数了.即:

myWebView.getSettings().setJavaScriptEnabled(true);myWebView.addJavascriptInterface(new JavaScriptinterface(this),”android”);
登入後複製

最后利用 WebView 加载本地 html 文件的方法是:

myWebView.loadData(htmlText,"text/html", "utf-8");
登入後複製

此处的htmltext 是以字符串的方式读取 assets 报下 html中的内容.

实现利用返回键返回到上一页:

设置 WebView 的按键监听,监听到期返回键并判断网页是否能够返回 ,利用 WebView 的 goBack()返回到上一页.

WebView 缓存

在项目中如果使用到 WebView 控件,当加载 html 页面时,会在/data/data/包名目录下生成 database 与 cache 两个文件夹。

请求的 url 记录是保存在 WebViewCache.db,而 url 的内容是保存在 WebViewCache 文件夹下. 大家可以自己动手试一下,定义一个html文件,在里面显示一张图片,用WebView加载出来,然后再试着从缓存里把这张图片读取出来并显示 。

WebView 删除缓存

其实已经知道缓存保存的位置了,那么删除就很简单了,获取到这个缓存,然后删掉他就好了。

//删除保存于手机上的缓存private int clearCacheFolder(File dir,long numDays) {   int deletedFiles = 0;  if (dir!= null && dir.isDirectory()){    try {      for (File child:dir.listFiles()){          if (child.isDirectory()) {            deletedFiles += clearCacheFolder(child, numDays);        }        if (child.lastModified() < numDays) {          if (child.delete()) {           deletedFiles++;           }        }      }    } catch(Exception e) {      e.printStackTrace();     }  }  return deletedFiles; }
登入後複製

是否启用缓存功能也是可以控制的

//优先使用缓存:     WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);     //不使用缓存:     WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
登入後複製

在退出应用的时候加上如下代码,可以完整的清空缓存

File file = CacheManager.getCacheFileBaseDir();    if (file != null && file.exists() && file.isDirectory()) {        for (File item : file.listFiles()) {            item.delete();        }        file.delete();    }    context.deleteDatabase("WebView.db");     context.deleteDatabase("WebViewCache.db");
登入後複製

WebView 处理 404 错误

显示网页还会遇到一个问题,就是网页有可能会找不到,WebView当然也是可以处理的

public class WebView_404 extends Activity {     private Handler handler = new Handler() {    public void handleMessage(Message msg) {      if(msg.what==404) {//主页不存在        //载入本地 assets 文件夹下面的错误提示页面 404.html         web.loadUrl("file:///android_asset/404.html");      }else{        web.loadUrl(HOMEPAGE);      }    }    };    @Override    protected void onCreate(Bundle savedInstanceState) {      web.setWebViewClient(new WebViewClient() {    public boolean shouldOverrideUrl(WebView view,String url) {         if(url.startsWith("http://") && getRespStatus(url)==404) {          view.stopLoading();          //载入本地 assets 文件夹下面的错误提示页面 404.html           view.loadUrl("file:///android_asset/404.html");        }else{          view.loadUrl(url);        }          return true;        }      });      new Thread(new Runnable() {    public void run() {          Message msg = new Message();          //此处判断主页是否存在,因为主页是通过 loadUrl 加载的,          //此时不会执行 shouldOverrideUrlLoading 进行页面是否存在的判断 //进入主页后,点主页里面的链接,链接到其他页面就一定会执行          shouldOverrideUrlLoading 方法了           if(getRespStatus(HOMEPAGE)==404) {          msg.what = 404;          }          handler.sendMessage(msg);      }).start();  }}
登入後複製

判断 WebView 是否已经滚动到页面底端

在View中有一个getScrollY()方法,可以返回当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离。

还有getHeight()或者 getBottom()方法都返回当前 View 这个容器的高度

在ViewView中还有getContentHeight() 方法可以返回整个 html 页面的高度,但并不等同于当前整个页面的高度 ,因为 WebView 有缩放功能。你可以通过如下代码来启动或关闭webview的缩放功能。

mWebView.getSettings().setSupportZoom(true);mWebView.getSettings().setBuiltInZoomControls(true);
登入後複製

所以当前整个页面的高度实际上应该是原始 html 的高度再乘上缩放比例. 因此,更正后的结果 ,准确的判断方法应该是:

// 如果已经处于底端if(WebView.getContentHeight*WebView.getScale() -(webvi ew.getHeight()+WebView.getScrollY())){   //XXX}
登入後複製

WebView获取服务器中的 session 问题

接下来我们讲如下两个问题:

Android 中的 WebView 如何获取服务器页面的 jsessionid 的值

Android 的 WebView 又是如何把得到的 jsessionid 的值在 set 到服务器中,一致达到他们在同一个 jsessionid 的回话中.

其实非常非常简单,只不过是几个方法罢了:

CookieManager cm = CookieManager.getInstance(); cm.removeAllCookie();cm.getCookie(url);cm.setCookie(url, cookie);
登入後複製

另外还有个 CookieSyncManager,也许你会在一些旧的项目中看到它。从名字来理解,它实际上应该是一个异步缓存器。不过我们看到这个方法已经被标记为过时了,查看源码可以看到过时原因是现在WebView已经是自动的异步缓存了,所以这个类已经没有存在的意义了。 CookieSyncManager

WebView清除本地cookies

首先,要清除肯定要会添加,这里给大家提供一个工具方法:

/***     * 如果用户已经登录,则同步本地的cookie到webview中     */    public void synCookies() {        if (!CacheUtils.isLogin(this)) return;        CookieSyncManager.createInstance(this);        CookieManager cookieManager = CookieManager.getInstance();        cookieManager.setAcceptCookie(true);        cookieManager.removeSessionCookie();//移除        String cookies = PreferenceHelper.readString(this, AppConfig.COOKIE_KEY, AppConfig.COOKIE_KEY);        KJLoger.debug(cookies);        cookieManager.setCookie(url, cookies);        CookieSyncManager.getInstance().sync();    }
登入後複製

在使用网页版淘宝或百度登录时,WebView会自动登录上次的帐号!(因为WebView 记录了帐号和密码的cookies) 所以,需要清除 SessionCookie也是有必要的。

那么CookieManager同样也为我们提供了清除cookie的方法

CookieManager.getInstance().removeSessionCookie();
登入後複製

这里顺便说一下WebView本身也是会记录html缓存的,webview本身就提供了清理缓存的方法,其中参数true是指是否包括磁盘文件也一并清除:

webview.clearCache(true);webview.clearHistory();
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles