`
WebAppTrend
  • 浏览: 54967 次
社区版块
存档分类
最新评论

Android官方文档在WebView中构建Web Apps

 
阅读更多

概览

  • 在你的Android应用布局中使用 WebView  来展现web页面
  • 你可以创建从Javascript到客户端Android代码的接口

文档内容

将 WebView 加入你的应用

¨     在Webview中使用 JavaScript

¨     启用 JavaScript

¨     将 JavaScript代码绑定到Android代码

处理页面导航

¨    历史记录导航

关键的类

WebView

WebSettings

WebViewClient

相关手册

Web View

 如果你想发布一个web app(或者仅仅是一个web页面)作为客户端的一部分,你可以使用WebView WebView 是Android中 View 的扩展,能让你将web页面作为你的活动布局(activity layout)。它不包含一个浏览器的完整功能,比如导航控制或者地址栏。 WebView 默认做的仅仅是展现一个Web页面。

使用 WebView 的一个常见场景是当你想要在应用中提供一些你可能需要更新的信息的时候,比如终端用户协议或者用户指南。在你的Android应用中,你需要创建包含WebView Activity  ,然后利用它来展现你挂在网上的文档。

另外一个使用WebView 的场景是你为用户提供的数据时需要连接网络来获取数据,比如email。在这种情况下,你可能会发现在Android应用中构建一个WebView 来展现提供相关数据的web页面更为容易,而不是试图连接到网络获取数据,解析数据并将其安置到Android布局中。你可以设计一个专供Android设备使用的web页面,并在Android中实现一个WebView 来加载这个页面。

该文档展示了你可以如何开始使用 WebView 并额外做一些事情,比如页面导航、将web页面中的Javascript代码绑定到你的Android应用中的代码上去。

将 WebView 加入你的应用

要在你的应用中加入WebView  ,只需要在你的活动布局中加入<WebView> 元素即可。例如,下面是一个布局文件,在这个文件中,WebView  占满了屏幕。

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

要在 WebView 加载页面, 使用 loadUrl() 。例如:

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

在它有效工作之前,你要保证你的应用能访问网络。要访问网络,需要在你的配置文件中获取INTERNET 许可。例如:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

这就是你要应用一个WebView  来展现web页面基本的所要做的所有事情了。

在WebView中使用Javascript

如果你想要你加载在WebView 中的web页面使用Javascript,你需要在WebView 中启用Javascript。一旦启用Javascript,你就可以在你的应用代码以及你的Javascript代码间创建接口了。

启用JavaScript

你可以通过WebView 中带有的 WebSettings 来启用它。你可以通过 getSettings() 来获取 WebSettings 的值,然后通过setJavaScriptEnabled() 来启用Javascript。

例如:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings  还提供了很多其他有用的设置。比如,如果你在开发一个专用于Android应用中 WebView  的web app,那么你就可以通过 setUserAgentString() 定义自定义用户代理字符串(custom user agent string),然后通过在web页面中查询自定义用户代理来确认正在请求你的web页面的客户端确实是Android应用。

将JavaScript 代码绑定到Android 代码

在开发专用于Android应用中 WebView  的web app时,你可以在你的Javascript代码和客户端的Android代码间创建接口。例如,你的Javascript代码可以调用Android代码中的方法来展示一个Dialog ,而不是使用Javascript中的alert()函数。

为了在你的Javascript和Android代码间绑定一个新的接口,需要调用addJavascriptInterface() ,传给它一个类实例来绑定到Javascript,以及一个接口名让Javascript可以调用以便来访问类。

例如:你可以在你的Android应用中包括如下类:

public class JavaScriptInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

在这个例子中,JavaScriptInterface让web页面可以使用showToast()方法来创建一个Toast  消息。

你可以通过 addJavascriptInterface() 绑定这个类到在WebView  运行的Javascript,并将接口命名为Android。例如:

WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

这段代码为在WebView  运行的Javascript创建了一个名为Android的接口。这时候,你的web app就能访问JavaScriptInterface  类了。例如,下面是一些HTML以及Javascript,在用户敲击按钮的时候,它们使用这个新接口创建一个toast消息:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

没有必要从Javascript初始化Android接口, WebView 会自动让它可以为你的web页面所用。所以,在按下按钮的时候,showAndroidToast()  函数会用这个Android接口来调用 JavaScriptInterface.showToast()  方法。

注意: 绑定到你的Javascript的对象在另一个线程中运行,而不是在创建它的线程中运行。

小心: 使用 addJavascriptInterface() 可以让Javascript控制你的Android应用。这是一把双刃剑,有用的同时也可能带来安全威胁。当WebView  中的HTML不可信时(例如,HTML的部分或者全部都是由一个未知的人或者进程提供的),那么一个攻击者就可能使用HTML来执行客户端的任何他想要的代码。因此,不应该使用addJavascriptInterface()  ,除非WebView 中的所有HTML以及Javascript都是你自己写的。你同样不应该让用户在你的WebView 可以定向到另外一个不是你自己的web页面上去(相反,让用户的默认浏览器应用打开外部链接——用户浏览器默认打开所有URL链接,因此一定要小心处理页面导航,像下面一节所描述的那样。)

处理页面导航

当用户点击一个WebView 中的页面的链接时,默认是让Android启动一个可以处理URL的应用。通常,是由默认的浏览器打开并加载目标URL的。然而,你可以在 WebView 中覆盖这一行为,那么链接就会在WebView 中打开。这样,你就可以让用户通过保存在WebView 中的浏览记录前进或者后退了。

要想让用户可以通过点击打开链接,只需要使用 setWebViewClient() WebView 提供一个 WebViewClient 即可。例如:

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



(new WebViewClient());

这样就可以了。现在所有用户点击的链接都会直接在WebView 中加载了。

如果你想要对于加载的链接的位置有更多控制,你可以创建自己的WebViewClient ,覆盖 shouldOverrideUrlLoading() 方法。例如:

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading



(WebView view, String url) {
        if (Uri.parse(url).getHost().equals("www.example.com")) {
            // This is my web site, so do not override; let my WebView load the page
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }
}

然后为 WebView 创建一个新的 WebViewClient 的实例。

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



(new MyWebViewClient());

现在当用户点击链接的时候,系统会调用shouldOverrideUrlLoading() ,来检查URL host是否和某个特定的域匹配(如上面的定义)。如果匹配,那么该方法就返回false,不去覆盖URL加载(它仍然让WebView  像往常一样加载URL)。如果不匹配,那么就会创建一个Intent 来加载默认活动(default Activity)来处理URLs(通过用户默认的web浏览器解析)。

历史记录导航

当你的 WebView 覆盖了URL加载,它会自动生成历史访问记录。你可以通过 goBack()  或 goForward() 向前或向后访问已访问过的站点。

例如,下面的代码实现了通过 Activity 来利用设备的后退按钮来向后导航:

@Override
public boolean onKeyDown



(int keyCode, KeyEvent event) {
    // Check if the key event was the BACK key and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack



() {
        myWebView.goBack



();
        return true;
    }
    // If it wasn't the BACK key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

如果有历史访问记录可供访问,canGoBack()  方法会返回true。类似地,你可以使用canGoForward() 来检查是否有向前访问历史。如果你不做这个检查,那么一旦用户访问到历史记录最后一项,goBack()  或 goForward() 什么都不会做。

原文链接:Building Web Apps in WebView

 

译文来源:http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,Q Q群见官方博客右侧。
分享到:
评论

相关推荐

    Android 基于x5Webview 浏览文件 office文档

    在"Android 基于x5Webview 浏览文件 office文档"的场景中,我们将探讨如何利用X5WebView来实现这一功能,并且这个方案已经经过了在Android 11上的测试验证。 首先,要使用X5WebView,你需要在项目中集成TBS(腾讯...

    3D WebView for Android Web Browser

    3D WebView for Android Web Browser

    3D WebView for Android Web Browser 3.14.1(较新)

    在【3D WebView for Android Web Browser 3.14.1.unitypackage】文件中,包含了所有必要的资源和脚本,开发者只需将这个Unity包导入到自己的项目中,然后按照文档指示配置和使用即可。这个包可能包含了预设的WebView...

    在Android的webview中定制js的alert,confirm和prompt对话框的方法

    在 Android 的 WebView 中定制 JS 的 Alert、Confirm 和 Prompt 对话框的方法 在 Android 中,使用 WebView 来加载网页时,会遇到 JavaScript 的 Alert、Confirm 和 Prompt 对话框的问题。这些对话框是浏览器默认的...

    3D WebView for Android and iOS Web Browser 4.2.2-4.4.4

    总之,3D WebView for Android and iOS Web Browser 4.2.2-4.4.4为移动应用开发者提供了一种强大的工具,结合Unity 2020.3版本,可以在不牺牲兼容性的前提下,实现令人惊叹的3D交互体验。通过深入理解和熟练掌握3D ...

    Android WebView 去除标题

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中加载和显示网页内容。有时候,我们可能希望去除WebView中的标题部分,以实现更自定义化的界面设计。本篇文章将详细探讨如何在Android的...

    3D WebView for Android and iOS Web Browser.unitypackage

    3D WebView for Android and iOS Web Browser

    Android下WebView中调用系统相机拍照范例

    在Android开发中,WebView是一个非常重要的组件,它可以加载和显示HTML内容,实现Web与原生应用的交互。在本文中,我们将深入探讨如何在WebView中调用系统的相机功能,允许用户拍照并返回照片的存储路径。这个功能...

    android webview 版本69.0

    在Android平台上,WebView是一个至关重要的组件,它允许开发者在应用程序中嵌入网页浏览功能,而无需启动完整的浏览器应用。在给定的标题“android webview 版本69.0”中,提到的是一个特定版本的WebView,即69.0。...

    Go-工具使用WebView从您的golanghttp服务器构建Android应用

    在Android开发中,WebView是一个可以在应用程序中展示网页内容的组件。它可以加载HTML、CSS和JavaScript,使得Android应用能够展示Web内容,甚至与Web页面进行交互。通常,当开发者想要快速构建一个具有基本Web功能...

    2D WebView for WebGL Web Browser IFrame

    标题中的“2D WebView for WebGL Web Browser IFrame”是一个针对Unity开发的插件,它允许在Unity游戏或应用中嵌入一个2D的Web视图,这个视图能够支持WebGL技术的网页浏览。WebGL是一种在浏览器中实现硬件加速3D图形...

    Android代码-Android-X5WebView基本封装

    Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...

    android 第三方webview cordova的集成使用

    在Android开发中,有时我们需要利用第三方库来增强应用的功能,比如WebView。WebView是Android系统提供的一种用于在应用程序中展示网页内容的组件,但它的功能相对有限。这时,我们可以选择集成Cordova来提升WebView...

    Android-WebSocket-WebView_DEMO_websocket_androidwebview_

    在本DEMO中,"Android-WebSocket-WebView"着重展示了如何在Android应用中集成WebSocket功能,并利用WebView加载网页,实现客户端与服务器的实时交互。这个项目对于理解WebSocket与Android WebView的结合使用具有重要...

    在android的webview中实现websocket通信

    在 Android 的 WebView 中实现 WebSocket 通信是当前移动端应用开发中的一个热门话题。WebSocket 是 HTML5 规范中的一项技术,可以实现客户端与服务器之间的实时双向通信。在桌面浏览器中,WebSocket 技术已经得到了...

    Unity 3D web插件 3D WebView for Android and iOS Web Browser 4.2.2

    文件列表中的"3D WebView for Android and iOS Web Browser 4.2.2.txt"可能是包含插件的使用指南、API文档或安装步骤的文本文件。而"3D WebView for Android and iOS Web Browser 4.2.2.unitypackage"是Unity的资源...

    android中WebView回调js的方法

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中加载和显示网页内容。有时候,我们不仅需要在Android代码中调用JavaScript,还需要让JavaScript能够反过来调用Android的Java方法,这种交互被...

    2D WebView for WebGL Web Browser4.0

    《2D WebView for WebGL Web Browser 4.0:在Web端构建沉浸式互动体验》 在当前数字化的时代,Web浏览器已经成为了人们获取信息、娱乐和交互的重要平台。随着技术的不断进步,WebGL(Web Graphics Library)作为一...

    android webview 拨打电话

    在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容。当我们需要在WebView中实现拨打电话的功能时,需要理解Android权限管理、WebView加载本地HTML以及JavaScript与Android原生代码...

    Android应用内嵌网页WebView

    在Android应用开发中,内嵌WebView是一个非常常见的需求,它允许开发者在应用程序中展示网页内容。WebView组件是Android SDK提供的一种原生控件,能够直接在应用内部加载和显示HTML、CSS以及JavaScript等内容,极大...

Global site tag (gtag.js) - Google Analytics