Android 有关 WebView 的一些使用方法_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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/imghwm/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으로 문의하세요.

관련 기사

HTML 너머 : 웹 개발을위한 필수 기술Apr 26, 2025 am 12:04 AM

강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.

HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

See all articles