Android高级UI面试题汇总(含详细解析二十一)

本文详细介绍了Android中WebView与JavaScript交互的多种方式,包括loadUrl、evaluateJavascript、addJavascriptInterface以及通过WebViewClient和WebChromeClient处理不同类型的JavaScript事件。这些知识点是Android开发者面试中的常见考题,对于理解和实践Android应用的前端交互至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android并发编程高级面试题汇总最全最细面试题讲解持续更新中👊👊
👀你想要的面试题这里都有👀
👇👇👇

WebView和JS交互的几种方式。

这道题想考察什么?

  1. 是否了解WebView与原生的交互?

考察的知识点

  1. Android去调用JS的代码
  2. JS去调用Android的代码

考生应该如何回答

1.交互方式总结
  • 对于Android调用JS代码的方法有2种:
    (1)通过WebView的loadUrl()
    (2)通过WebView的evaluateJavascript()

  • 对于JS调用Android代码的方法有3种:
    (1)通过WebView的addJavascriptInterface()进行对象映射
    (2)通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
    (3)通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS, 对话框alert()、confirm()、prompt()消息

2.具体分析
2.1 Android通过WebView调用 JS 代码

对于Android调用JS代码的方法有2种:

  1. 通过WebViewloadUrl()
  2. 通过WebViewevaluateJavascript()

2.1.1 方式1:通过WebViewloadUrl()

实例介绍:点击Android按钮,即调用WebView JS(文本名为javascript)中callJS()

具体使用如下所示:

步骤1:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

  1. 为了方便展示,本文是采用Andorid调用本地JS代码说明;
  2. 实际情况时,Android更多的是调用远程JS代码,即将加载的JS代码路径改成url即可

需要加载JS代码:javascript.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>      
// JS代码
     <script>
// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }
</script>
   </head>
</html>

步骤2:在Android里通过WebView设置调用JS代码

Android代码:MainActivity.java

 public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    Button button;

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

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

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        button = (Button) findViewById(R.id.button);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 通过Handler发送消息
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {

                        // 注意调用的JS方法名要对应上
                        // 调用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });
                
            }
        });

        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体,内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });

    }
}

小结:

上面的代码不难发现,基本流程是:1)进行websettings 的基本设置;2)导入js代码;3)进行其他操作相关的设置。

特别注意:JS代码调用一定要在 onPageFinished() 回调之后才能调用,否则不会调用。onPageFinished()属于WebViewClient类的方法,主要在页面加载结束时调用

2.1.2 方式2:通过WebView的evaluateJavascript()

优点:因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会,因此该方法比第一种方法效率更高、使用更简洁。

具体使用方法

// 只需要将第一种方法的loadUrl()换成下面该方法即可
    mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

2.1.3 两种方法对比:

​ 通过上面的对比,我们一般建议采用evaluateJavascript。

2.2 .JS通过WebView调用 Android 代码

对于JS调用Android代码的方法有3种:

  1. 通过WebView的addJavascriptInterface()进行对象映射
  2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
  3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

2.2.1 通过 WebView的addJavascriptInterface()进行对象映射

步骤1:定义一个与JS对象映射关系的Android类:AndroidtoJs

// 继承自Object类
public class AndroidtoJs extends Object {
    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS调用了Android的hello方法");
    }
}

步骤2:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>
         function callAndroid(){
        // 由于对象映射,所以调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>

步骤3:在Android里通过WebView设置Android类与JS代码的映射

public class MainActivity extends AppCompatActivity {

    WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1:Javascript对象名
        //参数2:Java对象名
        mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象

        // 加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

特点

优点:使用简单,仅将Android对象和JS对象映射即可。

缺点:存在严重的漏洞问题。

2.2.2 通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url

具体原理:

  1. Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url

  2. 解析该 url 的协议

  3. 如果检测到是预先约定好的协议,就调用相应方法

    即JS需要调用Android的方法

具体使用:

步骤1:在JS约定所需要的Url协议 JS代码:javascript.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
         function callAndroid(){
            /*约定的url协议为:js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
      </script>
</head>

<!-- 点击按钮则调用callAndroid()方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
   </body>
</html>

当该JS通过Android的mWebView.loadUrl(“file:///android_asset/javascript.html”)加载后,就会回调shouldOverrideUrlLoading (),接下来继续看步骤2:

步骤2:在Android通过WebViewClient复写shouldOverrideUrlLoading()

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;

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

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

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 步骤1:加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

		// 复写WebViewClient类的shouldOverrideUrlLoading方法
		mWebView.setWebViewClient(new WebViewClient() {
		  @Override
		  public boolean shouldOverrideUrlLoading(WebView view, String url) {

			  // 步骤2:根据协议的参数,判断是否是所需要的url
			  // 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
			  //假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)

			  Uri uri = Uri.parse(url);                                 
			  // 如果url的协议 = 预先约定的 js 协议
			  // 就解析往下解析参数
			  if ( uri.getScheme().equals("js")) {

				  // 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议
				  // 所以拦截url,下面JS开始调用Android需要的方法
				  if (uri.getAuthority().equals("webview")) {

					 //  步骤3:
					  // 执行JS所需要调用的逻辑
					  System.out.println("js调用了Android的方法");
					  // 可以在协议上带有参数并传递到Android上
					  HashMap<String, String> params = new HashMap<>();
					  Set<String> collection = uri.getQueryParameterNames();

				  }

				  return true;
			  }
			  return super.shouldOverrideUrlLoading(view, url);
		  }
	  });
   }
}

以上方式的特点

优点:不存在方式1的漏洞;

缺点:JS获取Android方法的返回值复杂。

如果JS想要得到Android方法的返回值,只能通过 WebView 的 loadUrl ()去执行 JS 方法把返回值传递回去,相关的代码如下:

// Android:MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");

// JS:javascript.html
function returnResult(result){
    alert("result is" + result);
}

2.2.3 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS, 对话框alert()、confirm()、prompt()消息

在JS中,有三个常用的对话框方法:

img

方式3的原理:Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调分别拦截JS对话框 (即上述三个方法),得到他们的消息内容,然后解析即可。

下面的例子将用拦截 JS的输入框(即prompt()方法)说明 :

下面的例子将用拦截 JS的输入框(即prompt()方法)说明 :

  1. 常用的拦截是:拦截 JS的输入框(即prompt()方法)
  2. 因为只有prompt()可以返回任意类型的值,操作最全面方便、更加灵活;而alert()对话框没有返回值;confirm()对话框只能返回两种状态(确定 / 取消)两个值

步骤1:加载JS代码 javascript.html,如下:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
        
    function clickprompt(){
    // 调用prompt()
    var result=prompt("js://demo?arg1=111&arg2=222");
    alert("demo " + result);
}

      </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
   <body>
     <button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>
   </body>
</html>

当使用mWebView.loadUrl(“file:///android_asset/javascript.html”)加载了上述JS代码后,就会触发回调onJsPrompt(),具体如下:

  1. 如果是拦截警告框(即alert()),则触发回调onJsAlert();
  2. 如果是拦截确认框(即confirm()),则触发回调onJsConfirm();

步骤2:在Android通过WebChromeClient复写onJsPrompt()

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

		// 先加载JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        mWebView.setWebChromeClient(new WebChromeClient() {
			// 拦截输入框(原理同方式2)
			// 参数message:代表promt()的内容(不是url)
			// 参数result:代表输入框的返回值
			@Override
			public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
				// 根据协议的参数,判断是否是所需要的url(原理同方式2)
				// 一般根据scheme(协议格式) & authority(协议名)判断(前两个参数)
				//假定传入进来的 url = "js://webview?arg1=111&arg2=222"(同时也是约定好的需要拦截的)

				Uri uri = Uri.parse(message);
				// 如果url的协议 = 预先约定的 js 协议
				// 就解析往下解析参数
				if ( uri.getScheme().equals("js")) {

					// 如果 authority  = 预先约定协议里的 webview,即代表都符合约定的协议
					// 所以拦截url,下面JS开始调用Android需要的方法
					if (uri.getAuthority().equals("webview")) {

						//
						// 执行JS所需要调用的逻辑
						System.out.println("js调用了Android的方法");
						// 可以在协议上带有参数并传递到Android上
						HashMap<String, String> params = new HashMap<>();
						Set<String> collection = uri.getQueryParameterNames();

						//参数result:代表消息框的返回值(输入值)
						result.confirm("js调用了Android的方法成功啦");
					}
					return true;
				}
				return super.onJsPrompt(view, url, message, defaultValue, result);
			}

// 通过alert()和confirm()拦截的原理相同,此处不作过多讲述

			// 拦截JS的警告框
			@Override
			public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
				return super.onJsAlert(view, url, message, result);
			}

			// 拦截JS的确认框
			@Override
			public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
				return super.onJsConfirm(view, url, message, result);
			}
		});
    }
}

2.2.4 小结

对以上三种方式的对比&应用场景分析

img

由于面试题内容比较多,篇幅有限,资料已经被整理成了PDF文档,有需要2023年Android中高级最全面试真题答案 完整文档的可扫描下方卡片免费获取~

PS:(文末还有使用ChatGPT机器人小福利哦!!大家不要错过)

目录

img

第一章 Java方面

  • Java基础部分
  • Java集合
  • Java多线程
  • Java虚拟机

img

第二章 Android方面

  • Android四大组件相关
  • Android异步任务和消息机制
  • Android UI绘制相关
  • Android性能调优相关
  • Android中的IPC
  • Android系统SDK相关
  • 第三方框架分析
  • 综合技术
  • 数据结构方面
  • 设计模式
  • 计算机网络方面
  • Kotlin方面

img

第三章 音视频开发高频面试题

  • 为什么巨大的原始视频可以编码成很小的视频呢?这其中的技术是什么呢?
  • 怎么做到直播秒开优化?
  • 直方图在图像处理里面最重要的作用是什么?
  • 数字图像滤波有哪些方法?
  • 图像可以提取的特征有哪些?
  • 衡量图像重建好坏的标准有哪些?怎样计算?

img

第四章 Flutter高频面试题

  • Dart部分
  • Flutter部分

img

第五章 算法高频面试题

  • 如何高效寻找素数
  • 如何运用二分查找算法
  • 如何高效解决雨水问题
  • 如何去除有序数组的重复元素
  • 如何高效进行模幂运算
  • 如何寻找最长回文子串

img

第六章 Andrio Framework方面

  • 系统启动流程面试题解析
  • Binder面试题解析
  • Handler面试题解析
  • AMS面试题解析

img

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值