zoukankan      html  css  js  c++  java
  • AndroidWebView

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页,实现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文件中的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>
    效果图:

    第二种方法的步骤:
    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>
    效果图:

    另一篇:http://blog.csdn.net/chenshijun0101/article/details/7045394

    WebVIew总结

    浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowserandroidios都有webview。只是其引擎不同,相对于微软的webbrowserandroidioswebview的引擎都是webkit,对Html5提供支持。本篇主要介绍androidwebview之强大。

    A.    webview组件如何使用

     

    1)       添加权限:AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。

    2)       在要Activity中生成一个WebView组件:WebView webView = new WebView(this);或者可以在activitylayout文件里添加webview控件:

    <WebView

    android:id="@+id/wv"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="@string/hello"

        />

    3)       设置WebView基本信息:
              如果访问的页面中有Javascript,则webview必须设置支持Javascript
              webview.getSettings().setJavaScriptEnabled(true);  
              触摸焦点起作用
              requestFocus();
              取消滚动条
              this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

     

    4)       设置WevView要显示的网页:
              互联网用:webView.loadUrl("http://www.google.com"); 
              本地文件用:webView.loadUrl("file:///android_asset/XX.html");  本地文件存放在:assets文件中

    5)       如果希望点击链接由自己处理,而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象(WebViewClient)并重写其中的一些方法:
     shouldOverrideUrlLoading:对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法,并传递参数:按下的url。比如当webview内嵌网页的某个数字被点击时,它会自动认为这是一个电话请求,会传递urltel:123,如果你不希望如此可通过重写shouldOverrideUrlLoading函数解决:

      

    1. public boolean shouldOverrideUrlLoading(WebView view,String url){  
    2.   
    3.         if(url.indexOf("tel:")<0){//页面上有数字会导致连接电话   
    4.   
    5.             view.loadUrl(url);  
    6.   
    7.         }  
    8.   
    9.            return true;            
    10.   
    11.        }  



            另外还有其他一些可重写的方法 
    1
    ,接收到Http请求的事件
    onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) 

    2,打开链接前的事件
    public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } 

    这个函数我们可以做很多操作,比如我们读取到某些特殊的URL,于是就可以不打开地址,取消这个操作,进行预先定义的其他操作,这对一个程序是非常必要的。
     
    3
    ,载入页面完成的事件
    public void onPageFinished(WebView view, String url){ } 

    同样道理,我们知道一个页面载入完成,于是我们可以关闭loading条,切换程序动作。
     
    4
    ,载入页面开始的事件
    public void onPageStarted(WebView view, String url, Bitmap favicon) { } 

    这个事件就是开始载入页面调用的,通常我们可以在这设定一个loading的页面,告诉用户程序在等待网络响应。
     
    通过这几个事件,我们可以很轻松的控制程序操作,一边用着浏览器显示内容,一边监控着用户操作实现我们需要的各种显示方式,同时可以防止用户产生误操作。
          

    6)       如果用webview点链接看了很多页以后,如果不做任何处理,点击系统“Back”键,整个浏览器会调用finish()而结束自身,如果希望浏览的网页回退而不是退出浏览器,需要在当前Activity中处理并消费掉该Back事件。
          
     覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。

      

    1. public boolean onKeyDown(int keyCoder,KeyEvent event){  
    2.                         if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){  
    3.                                  webview.goBack();   //goBack()表示返回webView的上一页面   
    4.   
    5.                                 return true;  
    6.                          }  
    7.                          return false;  
    8.                 }  
     

    B.    Webviewjs交互

    Webviewjs的双向交互才是androidwebview强大所在,也是马甲精神能够彻底执行的基础保障。

    首先,webview可以定义一个在其内嵌页面中可以触发的事件

     

    1. wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  
    2.   
    3. rivate final class DemoJavaScriptInterface  
    4.   
    5.    {  
    6. nbsp;DemoJavaScriptInterface(){}  
    7.   
    8.     public void clickonAndroid( final String order){  
    9.         mHandler.post(newRunnable(){  
    10.             @Override  
    11.             public void run(){  
    12.                       jsonText="{"name":""+order+""}";  
    13.                wv.loadUrl("javascript:wave("+jsonText+")");  
    14.             }  
    15.         });  
    16.     }  

    通过以上代码,即可实现在其内嵌网页中触发window.demo.clickOnAndroid(str)事件并传参数strwebviewWebview接收到str之后,可以通过以上代码触发其内嵌页面中的js函数wave(str)。这样就可以实现网页触发webview的事件并传参数,webview接收参数并调用js函数。

    下面看我的Html脚本:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

    function toclient()

    {

        var order=$("#val").val();

    window.demo.clickonAndroid(order);

       

        }

       

        function wave(str){

           //alert(str.name);

           $("#fromclient").text(str.name);

        }

    </script>

    </head>

        <body>这是一个html页面

        <br/>

     输入一个字符串:<br/>

      <input id="val" />

            <input type="submit" value="点击提交给客户端"

            onclick="toclient();"/>

          <br /> 

            显示返回:<label id="fromclient"></label>

        </body>

    </html>

    通过脚本看到wavestr)函数是负责将原来传给webview的数据重新拿回页面,效果图如下:

     

    另外,如果你想获取页面的一些处理数据并交给webview客户端处理,可在wave函数里将数据alert,然后webview中重写WebChromeClientonJsAlert函数,具体代码如下

    1. wv.setWebChromeClient(new MyWebChromeClient());  
    2.   
    3. final  class MyWebChromeClient extends WebChromeClient{  
    4.   
    5.     @Override  
    6.   
    7.       public booleanonJsAlert(WebView view, String url, String message, final JsResult result) {   
    8.   
    9. //message就是wave函数里alert的字符串,这样你就可以在android客户端里对这个数据进行处理   
    10.   
    11.                 result.confirm();          
    12.   
    13.               }   
    14.   
    15.  return true;    
    16.         }  

    关于用WebView或手机浏览器打开连接问题 转自:http://blog.csdn.net/chenshijun0101/article/details/7045145

    1.通常情况下 大家可能都想使用WebView打开网页内部链接而不想再调用手机浏览器,我们可以通过以下两种方法实现:

    (1)为WebView设置一个WebViewClient,并重写shouldOverrideUrlLoading(WebView view, String url)方法。

    1. class MyWebViewClient extends WebViewClient {  
    2.   
    3.     @Override  
    4.   
    5.     public boolean shouldOverrideUrlLoading(WebView view, String url){  
    6.   
    7.     // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边   
    8.   
    9.        view.loadUrl(url);  
    10.   
    11.        return true;  
    12.   
    13.        }  
    14.   
    15. }  
    class MyWebViewClient extends WebViewClient {
    
        @Override
    
        public boolean shouldOverrideUrlLoading(WebView view, String url){
    
        // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
    
           view.loadUrl(url);
    
           return true;
    
           }
    
    }



    (2)为WebView设置一个WebViewClient,并重写onPageStarted(WebView view, String url, Bitmap favicon)方法。

    1. class MyWebViewClient extends WebViewClient {  
    2.   
    3.     @Override  
    4.   
    5. public void onPageStarted(WebView view, String url, Bitmap favicon) {  
    6.   
    7.     // TODO Auto-generated method stub   
    8.   
    9.     super.onPageStarted(view, url, favicon);  
    10.   
    11. }  
    12.   
    13. }  
    class MyWebViewClient extends WebViewClient {
    
        @Override
    
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
    
        // TODO Auto-generated method stub
    
        super.onPageStarted(view, url, favicon);
    
    }
    
    }



    这两种方法其实都是让参数view(WebView)加载参数url从而避免手机浏览器加载url,第一种方式更常用一些。

    2.但有些情况下  我们可能想用WebView打开大部分链接,而有些链接我们希望调用手机浏览器来打开,我最近的一个项目中就有这样的需求。这样其实也很简单,我们只需要对上面第一种方法加以修改即可。

    1. class MyWebViewClient extends WebViewClient {  
    2.   
    3.     @Override  
    4.   
    5.     public boolean shouldOverrideUrlLoading(WebView view, String url) {  
    6.   
    7.     // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边   
    8.   
    9.            if (openWithWevView(url)) {  
    10.   
    11.               view.loadUrl(url);  
    12.   
    13.            }else{  
    14.   
    15.               Uri uri = Uri.parse(url); //url为你要链接的地址   
    16.   
    17.               Intent intent =new Intent(Intent.ACTION_VIEW, uri);  
    18.   
    19.               startActivity(intent);  
    20.   
    21.            }  
    22.   
    23.            return true;  
    24.   
    25. }  
    class MyWebViewClient extends WebViewClient {
    
        @Override
    
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
    
        // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
    
               if (openWithWevView(url)) {
    
                  view.loadUrl(url);
    
               }else{
    
                  Uri uri = Uri.parse(url); //url为你要链接的地址
    
                  Intent intent =new Intent(Intent.ACTION_VIEW, uri);
    
                  startActivity(intent);
    
               }
    
               return true;
    
    }



    其中openWithWevView(url)是自己写的一个方法,用来判断是否用WevView打开该链接。



    WebViewClient与WebChromeClient的区别 转自:http://www.cnblogs.com/Crazy-jacking/archive/2011/11/24/2262425.html

    Android应用开发的时候可能会用到WebView这个组件,使用过程中可能会接触到WebViewClient与WebChromeClient,那么这两个类到底有什么不同呢?

    WebViewClient主要帮助WebView处理各种通知、请求事件的,比如:

    onLoadResource

    onPageStart

    onPageFinish

    onReceiveError

    onReceivedHttpAuthRequest

    WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如

    onCloseWindow(关闭WebView)

    onCreateWindow()

    onJsAlert (WebView上alert无效,需要定制WebChromeClient处理弹出)

    onJsPrompt

    onJsConfirm

    onProgressChanged

    onReceivedIcon

    onReceivedTitle

    看上去他们有很多不同,实际使用的话,如果你的WebView只是用来处理一些html的页面内容,只用WebViewClient就行了,如果需要更丰富的处理效果,比如JS、进度条等,就要用到WebChromeClient。
    更多的时候,你可以这样

    WebView webView;  

    webView= (WebView) findViewById(R.id.webview); 

     webView.setWebChromeClient(new WebChromeClient());  

    webView.setWebViewClient(new WebViewClient());  

    webView.getSettings().

    setJavaScriptEnabled(true); 

     webView.loadUrl(url);  

    这样你的WebView理论上就能有大部分需要实现的特色;如果让其更加的沸腾,你就用你错才智让它沸腾吧。

  • 相关阅读:
    canvas上的像素操作(图像复制,细调)
    AMD、CMD、CommonJS 和 ES6 模块化规范
    JS垃圾回收
    函数式编程中如何处理副作用?
    vue中的$on,$emit,$once,$off源码实现
    重新学习react生命周期
    keep alive实现原理
    读取 url 参数方法
    使用Bootstratp Blazor +EF Codefirst 愉快的增删改查!
    记录一下爬取微信小程序视频的过程!
  • 原文地址:https://www.cnblogs.com/qingblog/p/2632099.html
Copyright © 2011-2022 走看看