WebView学习

最新推荐文章于 2021-09-27 10:24:00 发布

zzzypp

最新推荐文章于 2021-09-27 10:24:00 发布

阅读量247

点赞数

分类专栏： android 文章标签： webview

本文链接：https://blog.csdn.net/zzzypp/article/details/65079582

版权

android 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、webview简单使用

我们直接看一个简单使用的例子：

public class WebViewTestActivity extends Activity {

    private WebView webView;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity_layout);
        init();
    }

    private void init(){
        webView = (WebView) findViewById(R.id.webView);
        //WebView加载web资源
        webView.loadUrl("http://baidu.com");
        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
        webView.setWebViewClient(new WebViewClient(){
           @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
            //返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
            view.loadUrl(url);
            return true;
        }
       });
    }


}

然后布局文件中：

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <WebView  
  8.         android:id="@+id/webView"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent" />  
  11.   
  12. </LinearLayout>

这样即可正常显示网页。

如果访问的页面中有Javascript，则webview必须设置支持Javascript

//启用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

二、webveiw和javascript交互

1、js调用android的方法

同样的我们复制上面的类下来，稍作修改

public class WebViewTestActivity extends Activity {

    private WebView webView;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity_layout);
        initializeWebView();
    }

    private void initializeWebView(){
        webView = (WebView) findViewById(R.id.webview);
        String url = "file:///android_asset/test.html";
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        this.webView.loadUrl(url);

        //这里的两个参数：第一个是调用的对象，第二个是这个对象的别名
        webView.addJavascriptInterface(new Object() {
            @JavascriptInterface
            public void clickOnAndroid() {
                mHandler.post(new Runnable() {
                    public void run() {
                        Toast.makeText(MainActivity.this, "测试调用java", Toast.LENGTH_LONG).show();
                    }
                });
            }
        }, "demo");
    }
}

然后布局文件和上面一样。
注意：在上面第21行，我们看到有个注释@JavascriptInterface，这个在android4.4之后是必须加上的，因为android对安全性要求更高了。

然后我们写一个非常简单的html

<html>
 <body>
    <button onclick="window.demo.clickOnAndroid()">按钮</button>
 </body>
</html>

上面代码中”demo”就是上一段代码中的被调用对象的别名；

2、android调用js里面的代码方法

实现Android调用JS脚本是非常简单的，直接Webview调用loadUrl方法，里面是JS的方法名，并可以传入参数，javascript：xxx()方法名需要和JS方法名相同

contentWebView.loadUrl("javascript:javacalljs()");

同样我们给出一个简单例子：
还是用上面的代码稍作修改

public class WebViewTestActivity extends Activity {

    private WebView webView;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity_layout);
        initializeWebView();
    }

    private void initializeWebView(){
        webView = (WebView) findViewById(R.id.webview);
        String url = "file:///android_asset/test.html";
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        this.webView.loadUrl(url);

        //这里的两个参数：第一个是调用的对象，第二个是这个对象的别名
        webView.addJavascriptInterface(new Object() {
            @JavascriptInterface
            public void clickOnAndroid() {
                mHandler.post(new Runnable() {
                    public void run() {
                        Toast.makeText(MainActivity.this, "测试调用java", Toast.LENGTH_LONG).show();
                    }
                });
            }
        }, "demo");
    }

    public void onClick(View view){
        webView.loadUrl("javascript:javacalljs()");
    }
}

这里我们增加一个onClick()方法，同时在xml布局文件中增加一个按钮，调用这个方法；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点我改变html上按钮文字"
        android:onClick="onClick"
        />

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="70dp"
        />
</RelativeLayout>

然后在html中写如下代码：


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    function javacalljs(){
        document.getElementById("anniu").innerHTML="android调用js成功";
    }
    </script>
</head>
 <body>

 <button onclick="window.demo.clickOnAndroid()" id="anniu">按钮</button>
 </body>
</html>