WebView的简单使用

最新推荐文章于 2024-08-29 17:08:36 发布
最新推荐文章于 2024-08-29 17:08:36 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： Android 文章标签： webView java调用 js调用 动态显示title
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37971615/article/details/82796523
版权

webView是一个网络视图，能加载显示网页，可以将其视为一个浏览器。在使用的过程中需要加入网络权限。
【想看源码点这里】

以下是整理的webView的基础使用

  • webView加载Url （加载url将页面显示到App上，点击时不会跳到浏览器）
  • webView显示页面的title （加载url，切换网页会动态显示title）
  • webView调用JAVA方法 (点击页面按钮，将页面输入框的内容传到App界面的TextView中)
  • webView调用Js方法 (点击App按钮，将App的EditText中的内容传到页面的输入框中)

1.开发准备
（1）在AndroidManifest.xml中开启权限

 <!--上网权限-->
 <uses-permission android:name="android.permission.INTERNET" />

2.开始写代码啦
（1）调用Url

加载url将页面显示到App上，点击时不会跳到浏览器

页面代码，webview.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="WebView的简单使用"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"></WebView>
</RelativeLayout>

Activity代码

public class WebViewByURL extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        webView = findViewById(R.id.myWebView);
        webView.loadUrl("https://www.baidu.com");
        //重回下面俩个方法，就会在App中打开页面，而不是跳转到浏览器
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }
}

(2)显示Url的Title

加载url，切换网页会动态显示title

界面布局，webview1.xml

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

    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorPrimaryDark">

        <Button
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:text="返回" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="20sp"/>

        <Button
            android:id="@+id/btn_refresh"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:text="刷新" />

    </RelativeLayout>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1" />
</LinearLayout>

Activity方法
在加载Url的基础上，修改 webView.setWebChromeClient(new WebChromeClient(){});

 webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, final String title) {
                Log.e("WebViewTitle","title==="+title);
                if(!TextUtils.isEmpty(title)){
                    textView.setText(title);
                }else{
                    textView.setText("获取失败");
                }
                super.onReceivedTitle(view, title);
            }
        });

(3)调用Java方法

点击页面按钮，将页面输入框的内容传到App界面的TextView中

开发步骤：
1.允许WebView加载js
webView.getSettings().setJavaScriptEnabled(true);
2.编写js接口类
3.给WebView添加js接口
webView.addJavascriptInterface(obj,name);

界面布局，webview2.xml

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

    

<TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="test"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="10dp"/>
</LinearLayout>

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebView</title>
    <style type="text/css">
body {
	background: #e3e7fd;
}

.btn {
	line-height: 40px;
	margin: 10px;
	background: #cccccc;
}


    </style>
</head>
<body>
<h2>WebView</h2>
<span>请输入要传入的值</span>
<div>
    <input type="text" id="input">
</div>
<div id="btn">
    <span class="btn">点我</span>
</div>

<script type="text/javascript">

	/* 点击webView中的按钮之后，将输入框的内容显示到原生app的textView中 */

	var btnEle = document.getElementById("btn");
	var inputEle = document.getElementById("input");
	btnEle.addEventListener("click", function(){
		var str = inputEle.value;
		/* alert(str) */
		if(window.ImoocJsInterface){
			ImoocJsInterface.setValue(str);
		}else{
			alert("ImoocJsInterface找不到，可能不存在");
		}
	});

    <!-- webView的js调用-->
    var remote = function(str){
        inputEle.value=str;
    }

</script>
</body>
</html>

Activity代码

public class WebViewByJava extends AppCompatActivity implements JsBridge {
  //  private static String base_url="http://lj1757620885.6655.la:54746/huashengke/";
    private WebView webView;
    private TextView textView;
    private Handler myHandler;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview2);
        //初始化
        initWidgets(savedInstanceState);
        //主线程和页面加载线程不一样
        Log.e("MainActivity","onCreate");

    }

    private void initWidgets(Bundle savedInstanceState) {
        webView = findViewById(R.id.myWebView);
        textView = findViewById(R.id.tv_result);
        myHandler = new Handler();
        //1.允许WebView加载js的代码
        webView.getSettings().setJavaScriptEnabled(true);
        //2.编写js接口类--创建接口类，写接口方法
        //3.给WebView添加js接口
        webView.addJavascriptInterface(new ImoocJsInterface(this),"ImoocJsInterface");
        webView.loadUrl("file:///android_asset/index.html");
    }

    //实现JsBridge的方法
    @Override
    public void setTextViewValue(final String value) {
        //通过handle将页面的value值传到主线程
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                textView.setText(value);
            }
        });
    }
}

(4)调用Js方法

点击App按钮，将App的EditText中的内容传到页面的输入框中

开发步骤：
使用loadUrl方法调用javascript 【 webView.loadUrl(javascript:jsString);】
jsString是调用js代码的字符串

页面布局同上
界面布局，webview3.xml

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

    

<EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:hint="test"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确定"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="10dp"/>
</LinearLayout>

Activity代码

public class WebViewByJs extends AppCompatActivity {
    private WebView webView;
    private EditText editText;
    private Button button;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview3);
        initWidgets(savedInstanceState);

    }
    private void initWidgets(Bundle savedInstanceState) {
        webView = findViewById(R.id.myWebView);
        editText = findViewById(R.id.edit);
        button = findViewById(R.id.button);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        //点击按钮之后，将EditText的内容传到webView的输入框中
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String str = editText.getText().toString().trim();
                //''或者\""
                webView.loadUrl("javascript:if(window.remote){window.remote('"+str+"')}");
            }
        });
    }
}

3.补充
调用java方法时，将页面输入框的内容显示到App组件上，要注意线程问题。
可以通过log看一下，是在不同的线程，若想达到目的，可以通过Handle处理。
在这里插入图片描述

4.界面
(1)(2)加载url，动态修改title
(1)(2)加载url，动态修改title
(3)java调用
在这里插入图片描述
(4)Js调用
在这里插入图片描述

忘记昵称了
关注
专栏目录
WebView简易网页网络访问
xuwanli2012的博客
10-11 668
示例代码块 html代码： html> head> title>JS交互title> meta http-equiv="content-type" content="text/html; charset=utf-8"/> script type="text/javascript"> function invokedByJava(param) { docume
WebView简单使用（一）
youngzhiyong
12-18 530
近期在项目中遇到关于WebView与javascript的交互不能下载apk问题，顺便复习相关的知识。   1 基本使用      在xml中直接添加控件 <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"
Android Webview 详解
最新发布
zz130428的博客
08-29 1826
一个基于webkit引擎、展现web页面的控件Android 4.4前：Android Webview在低版本 & 高版本采用了不同的webkit版本的内核Android 4.4后：直接使用了Chrome内核Android去调用JS的代码JS去调用Android的代码二者沟通的桥梁是WebView通过WebView的loadUrl（）通过WebView的evaluateJavascript（）通过WebView的addJavascriptInterface（）进行对象映射。
Android—WebView简单使用
u011277123的博客
12-13 509
华清创客学院 2016-12-12 08:49 有时候我们可能会碰到一些比较特殊的需求，比如说要求在应用程序里展示一些网页。相信每个人都知道，加载和显示网页通常都是浏览器的任务，但是需求里又明确指出，不允许打开系统浏览器，而我们当然也不可能自己去编写一个浏览器出来，这时应该怎么办呢？ 不用担心，Android 早就已经考虑到了这种需求，并提供了一个 WebView控件，借助它我们就可以
WebView的使用详解
LJQDMY的博客
09-18 2930
WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。一般来说Webview可单独使用，可联合其子类一起使用，下面会介绍几种:1.Webview自身的常见方法；2.Webview的最常用的子类3.（WebSettings类、WebViewClient类、WebChromeClient类)Android和Js的交互3.1 Webview常用方法3.1.1 加载URL。
webview系列：webview的简单使用
有心好书
10-08 1197
webview系列：webview的简单使用Android及iOS的webview的引擎都是webkit，对H5提供支持. WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。webview组件如何使用1)添加权限：AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Web page not availabl
WebView简单使用Demo
06-18
WebView简单使用Demo通常会展示如何在Android应用中加载和展示一个网页，以及一些基本的交互功能。接下来，我们将深入探讨WebView的相关知识点。 1. **WebView的基本使用** - 首先，在布局文件（如`activity_main....
Webview简单使用Demo
09-15
本教程将详细讲解Webview的使用方法，并通过一个简单的Demo来帮助理解其核心功能。 1. **Webview的引入与设置** 在AndroidManifest.xml中，我们需要为应用添加Internet权限，因为Webview需要访问网络资源： ```...
Android WebView 的简单使用
09-01
下面将详细介绍如何在Android应用中简单使用WebView。 首先，我们需要在布局文件（例如`activity.xml`）中添加WebView组件。这可以通过在XML布局中插入以下代码来实现： ```xml <WebView android:id="@+id/...
android 简单webview的使用
11-22
本教程将详细介绍如何在Android中简单使用WebView。 一、WebView的基本概念 WebView是Android SDK中的一个类，继承自ViewGroup，它提供了在Android应用中展示网页的能力。WebView的核心功能包括加载URL、执行...
使用webview 封使用了webrtc 打开摄像头 的页面demo
12-22
在本示例中，“使用webview 封装使用了webrtc 打开摄像头的页面demo”意味着我们要在Webview中集成Webrtc，以便在Android应用中通过Web接口调用摄像头功能。 首先，我们需要了解Webview的基本用法。在...
android webview js和原生态交互
wzx_it的专栏
04-07 586
我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件 在开发过程中应该注意几点: 1.这是最基本的 AndroidManifest.xml 中必须添加访问网络权限。 2.如果访问的页面中有 Javascript,则 WebView 必须设置支持 Javascript。 WebView.getSettings().setJava
webview 简单使用
心田祭思博客
12-20 201
Android webview 简单使用
Carson带你学Android：最全面的Webview使用详解
热门推荐
Carson带你学Android
09-28 27万+
前言 现在很多App里都内置了Web网页（Hyprid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 那么这种该如何实现呢？其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。 目录1. 简介WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内
webview的简单使用
天王盖地虎
04-03 250
WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限 webSettings.setJavaScriptCanOpenW...
Android WebView组件使用教程
本文将深入探讨如何在Android应用中使用WebView组件，并提供相关的配置和使用方法。 首先，为了使WebView能够正常访问网络，我们需要在AndroidManifest.xml文件中添加必要的权限。这一步至关重要，因为没有这个权限...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值