【Harmony OS】WebView调用JS并获取执行结果
WebView提供了在应用中集成Web页面的能力。在日常的开发中也会经常用到。
WebView派生于通用组件Component,可以像普通组件一样进行使用。
今天我们就介绍如何在应用内调用页面内的JavaScript方法。
参考网址:
文档中心
代码实现:
html代码如下:
本地html
这是一个本地HTML页面
// 应用调用Web页面 function callJS(message) { alert(message); return '123' } function sendData() { if (window.JsCallJava && window.JsCallJava.call) { // Web页面调用应用 var rst = window.JsCallJava.call("这个是来自本地Web页面的消息"); } else { alert('发送消息给WebviewSlice失败'); } }function getCookie(name) { var prefix = name + "=" var start = document.cookie.indexOf(prefix) if (start == -1) { return null; } var end = document.cookie.indexOf(";", start + prefix.length) if (end == -1) { end = document.cookie.length; } var value = document.cookie.substring(start + prefix.length, end) return unescape(value);}
xml代码如下:
Java代码如下:
package com.example.newwebview.slice;import com.example.newwebview.ResourceTable;import com.example.newwebview.utils.HiLogUtils;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Component;import ohos.agp.components.webengine.*;import ohos.agp.render.BlendMode;import ohos.agp.render.Paint;import ohos.agp.utils.TextTool;import ohos.agp.window.service.WindowManager;import ohos.global.resource.Resource;import ohos.hiviewdfx.HiLog;import ohos.media.image.ImagePacker;import ohos.media.image.PixelMap;import ohos.media.image.common.PixelFormat;import ohos.media.image.common.Size;import ohos.utils.net.Uri;import java.io.*;import java.net.*;public class WebViewAbility extends AbilitySlice { private static final String URL_LOCAL = "dataability://example.com/rawfile/example.html"; @Override protected void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_new_web_view); getWindow().setInputPanelDisplayType(WindowManager.LayoutConfig.INPUT_ADJUST_PAN); WebView webview= (WebView) findComponentById(ResourceTable.Id_webview); // 是否支持Javascript,默认值false webview.getWebConfig().setJavaScriptPermit(true); webview.setWebAgent(new WebAgent() { @Override public ResourceResponse processResourceRequest(WebView webView, ResourceRequest request) { final String authority = "example.com"; final String rawFile = "/rawfile/"; final String local = "/local/"; Uri requestUri = request.getRequestUrl(); if (authority.equals(requestUri.getDecodedAuthority())) { String path = requestUri.getDecodedPath(); if (TextTool.isNullOrEmpty(path)) { return super.processResourceRequest(webView, request); } if (path.startsWith(rawFile)) { // 根据自定义规则访问资源文件 String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, ""); String mimeType = URLConnection.guessContentTypeFromName(rawFilePath); try {Resource resource = getResourceManager().getRawFileEntry(rawFilePath).openRawFile();ResourceResponse response = new ResourceResponse(mimeType, resource, null);return response; } catch (IOException e) {//HiLog.info(TAG, "open raw file failed"); } } if (path.startsWith(local)) { // 根据自定义规则访问本地文件 String localFile = getContext().getFilesDir() + path.replace(local, "/");// HiLog.info(TAG, "open local file " + localFile); File file = new File(localFile); if (!file.exists()) {//HiLog.info(TAG, "file not exists");return super.processResourceRequest(webView, request); } String mimeType = URLConnection.guessContentTypeFromName(localFile); try {InputStream inputStream = new FileInputStream(file);ResourceResponse response = new ResourceResponse(mimeType, inputStream, null);return response; } catch (IOException e) {//HiLog.info(TAG, "open local file failed"); } } } return super.processResourceRequest(webView, request); } }); webview.setBrowserAgent(new BrowserAgent(WebViewAbility.this){ @Override public boolean onJsMessageShow(WebView webView, String url, String message, boolean isAlert, JsMessageResult result) { HiLogUtils.PrintLog(url); return false; } }); webview.load(URL_LOCAL); findComponentById(ResourceTable.Id_myImage).setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) {webview.executeJs("callJS('这是来自JavaSlice的消息')", msg -> { // 在这里处理Java调用Js的方法的返回值 HiLogUtils.PrintLog("msg====>>>"+msg);}); } }); } private void setWindowBgToAdaptWebView() { final String backgroundFileName = "_bg.jpg"; File file = new File(getContext().getFilesDir(), backgroundFileName); if (file.exists()) { getWindow().setBackground(file.getPath()); return; } PixelMap pixelMap = createBgPixelMap(); if (pixelMap == null) { return; } ImagePacker imagePacker = ImagePacker.create(); try (OutputStream outputStream = new FileOutputStream(file)) { ImagePacker.PackingOptions options = new ImagePacker.PackingOptions(); if (!imagePacker.initializePacking(outputStream, options)) { return; } if (!imagePacker.addImage(pixelMap)) { return; } if (imagePacker.finalizePacking() < 0) { return; } } catch (IOException e) { e.printStackTrace(); } finally { imagePacker.release(); } } private PixelMap createBgPixelMap() { final int length = 10; PixelMap.InitializationOptions initializationOptions = new PixelMap.InitializationOptions(); initializationOptions.size = new Size(length, length); initializationOptions.pixelFormat = PixelFormat.ARGB_8888; initializationOptions.editable = true; int[] defaultColors = new int[length * length]; return PixelMap.create(defaultColors, initializationOptions); }}
运行效果如下:
注:如果执行的js是不能编辑的页面,可以参考:
Android WebView 调用JS方法获取返回值_Luckie stone的博客-CSDN博客_js调用android的方法返回值
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh