zoukankan      html  css  js  c++  java

  • android WebView Note

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

    什么是webkit
    WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。 同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。

    传统上，WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore，它们分别对应的是KDE的KHTML和KJS。不过， 随着JavaScript引擎的独立性越来越强，现在WebKit和WebCore已经基本上混用不分（例如Google Chrome和Maxthon 3采用V8引擎，却仍然宣称自己是WebKit内核）。

    这里我们初步体验一下在android是使用webview浏览网页，在SDK的Dev Guide中有一个WebView的简单例子 。

    在开发过程中应该注意几点：
    1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
    2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。
    webview.getSettings().setJavaScriptEnabled(true);
    3.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖 webview的WebViewClient对象。

     
    1. mWebView.setWebViewClient(new WebViewClient(){
    2. publicboolean shouldOverrideUrlLoading(WebView view, String url) {
    3. view.loadUrl(url);
    4. returntrue;
    5. }
    6. });

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

     
    1. publicboolean onKeyDown(int keyCode, KeyEvent event) {
    2. if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
    3. mWebView.goBack();
    4. returntrue;
    5. }
    6. returnsuper.onKeyDown(keyCode, event);
    7. }

    5.下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的

    a.设置webview支持javascript.  webSettings.setJavaScriptEnabled(true); 

    b.绑定android对象到javascript对象. addJavascriptInterface(Object obj,String interfaceName);

    c.页面中调用javascript对象. javascript:window.demo.方法名称();

    在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以 为所欲为了。

    看一个实例：

    1. publicclass WebViewDemo extends Activity {
    2. private WebView mWebView;
    3. private Handler mHandler = new Handler();
    4. publicvoid onCreate(Bundle icicle) {
    5. super.onCreate(icicle);
    6. setContentView(R.layout.webviewdemo);
    7. mWebView = (WebView) findViewById(R.id.webview);
    8. WebSettings webSettings = mWebView.getSettings();
    9. webSettings.setJavaScriptEnabled(true);
    10. mWebView.addJavascriptInterface(new Object() {
    11. publicvoid clickOnAndroid() {
    12. mHandler.post(new Runnable() {
    13. publicvoid run() {
    14. mWebView.loadUrl("javascript:wave()");
    15. }
    16. });
    17. }
    18. }, "demo");
    19. mWebView.loadUrl("file:///android_asset/demo.html");
    20. }
    21. }

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

     
    1. <html>
    2. <mce:scriptlanguage="javascript"><!--
    3. function wave() {
    4. document.getElementById("droid").src="android_waving.png";
    5. }
    6. // --></mce:script>
    7. <body>
    8. <aonClick="window.demo.clickOnAndroid()">
    9. <imgid="droid"src="android_normal.png"mce_src="android_normal.png"/><br>
    10. Click me!
    11. </a>
    12. </body>
    13. </html>

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

    这里还有几个知识点：

    1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html"
    2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用 Handler的目的。

    6.webview 中使用div层会出现重叠显现.

    　　只能用dom方式操作div的删除动作.

    7.android中webview接收favicon总是获取为null解决方案

    8.webview中获取历史记录列表;

    代码示例：

    final WebView details = (WebView)findViewById(R.id.html_reviews);
        details.setBackgroundColor(0);
        details.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        final WebSettings webSettings = details.getSettings();
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(false);
        webSettings.setSupportZoom(false);
        webSettings.setBlockNetworkImage(true);

        details.loadData(someString,"text/html", "utf-8");

    someString 内容为<p class=".source"> asdf</p>
    <p class=".content"> qwer</p> 该webview显示内容为两行文字。

     WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。实现WebView有以下两种不同的方法：
    第一种方法的步骤：
    1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);
    2.调用WebView的loadUrl()方法，设置WevView要显示的网页：
    互联网用：webView.loadUrl("http://www.google.com");
    本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
    3.调用Activity的setContentView( )方法来显示网页视图
    4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
    5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。
    <uses-permission android:name="android.permission.INTERNET" />
    下面是具体例子：
    MainActivity.java

    package com.android.webview.activity; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.webkit.WebView; 

public class MainActivity extends Activity { 
private WebView webview; 
@Override
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
//实例化WebView对象 
webview = new WebView(this); 
//设置WebView属性，能够执行Javascript脚本 
webview.getSettings().setJavaScriptEnabled(true); 
//加载需要显示的网页 
webview.loadUrl("http://www.51cto.com/"); 
//设置Web视图 
setContentView(webview); 
} 

@Override
//设置回退 
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法 
public boolean onKeyDown(int keyCode, KeyEvent event) { 
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { 
webview.goBack(); //goBack()表示返回WebView的上一页面 
return true; 
} 
return false; 
}

    在AndroidManifest.xml文件中添加权限:

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.webview.activity"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>

    效果图：

    第二种方法的步骤：
    1、在布局文件中声明WebView
    2、在Activity中实例化WebView
    3、调用WebView的loadUrl( )方法，设置WevView要显示的网页
    4、为了让WebView能够响应超链接功能，调用setWebViewClient( )方法，设置 WebView视图
    5、用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
    6、需要在AndroidManifest.xml文件中添加权限，否则出现Web page not available错误。
    <uses-permission android:name="android.permission.INTERNET"/>
    下面是具体的例子：
    MainActivity.java

    package com.android.webview.activity; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 

public class MainActivity extends Activity { 
private WebView webview; 
@Override
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 
webview = (WebView) findViewById(R.id.webview); 
//设置WebView属性，能够执行Javascript脚本 
webview.getSettings().setJavaScriptEnabled(true); 
//加载需要显示的网页 
webview.loadUrl("http://www.51cto.com/"); 
//设置Web视图 
webview.setWebViewClient(new HelloWebViewClient ()); 
} 

@Override
//设置回退 
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法 
public boolean onKeyDown(int keyCode, KeyEvent event) { 
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { 
webview.goBack(); //goBack()表示返回WebView的上一页面 
return true; 
} 
return false; 
} 

//Web视图 
private class HelloWebViewClient extends WebViewClient { 
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { 
view.loadUrl(url); 
return true; 
} 
} 
}

    main.xml

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

    在AndroidManifest.xml文件中的17行添加权限

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.webview.activity"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>

    效果图：

     
  • 相关阅读:
    【Blazor】在ASP.NET Core中使用Blazor组件
    Github和Azure DevOps的代码同步
    【.NET Core】在Win10中用VS Code debug
    【UWP】利用EF Core操作SQLite
    【ASP.NET Core】mdl conflicts with tinymce
    【Windows10】如何使用Segoe MDL2 Assets图标
    Docker安装及使用，Docker 安装MySQL、安装Tomcat、安装RabbitMQ
    Anaconda安装常用配置及命令
    MySQL获取周、月、天日期，生成排序号
    Linux常用查询命令
  • 原文地址：https://www.cnblogs.com/qiengo/p/2471640.html
Copyright © 2011-2022 走看看