概览
- 在你的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的对象在另一个线程中运行,而不是在创建它的线程中运行。
处理页面导航
当用户点击一个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
相关推荐
Android 基于x5Webview 浏览文件 office文档 已测试Android11 功能实现
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...
Android8.0以下手机自带的android-system-webview版本过低使用
使用与支持 Vuplex VR/AR 浏览器的相同代码,即可轻松在 Windows 和 macOS 上以 3D 形式渲染 Web 内容并与之进行交互 该软件包支持 Android ≥ 6.0 上的原生视频和 WebGL,但某些 VR 虚拟现实头盔(如 Oculus Go 和 ...
在android的webview中实现websocket通信
3D WebView for Android Web Browser 3.16
3D WebView for Android and iOS Web Browser
3D WebView for Android with Gecko Engine Web Browser 4.1版本 该版本官方发布时间:2022年5月16日 此插件199美刀,unity版本要使用2018.4.36以上的版本 作者用的2019.4.14 完美没有报错 作者有使用这案例的教程,...
Android WebView 去除标题 利用javacript交互
3D WebView是用于在Unity3D模拟网页的插件
在Android的webview中定制js的alert,confirm和prompt对话框的方法
android中WebView回调js的方法
1.本文采用的是android调用assest中的本地.html文件,webview展示(加载网络的html效果是一样的,把url替换掉就行) 2.包含本地.html文件加载,点击.html控件,Android端响应 3.包含本地.html文件加载,点击.html...
Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...
3D WebView for Android and iOS Web Browser4.1
android webview拨打电话 关注博客http://himici.com
自定义webview中的网页“拍照”按钮调用系统相机拍照的API接口MyBrowserAPI.CapturePhoto(filename),在网页JavaScript中调用以后返回存放照片的完整路径名,默认将照片存放在系统SD卡的根目录,包含整个工程中需要添加...
android 程序集成 cordova使用方法
解决在webview中input标签type="file"不能使用的问题
这是AOSP的webview,包名com.android.webview,不是google的webview