> 文档中心 > 【Harmony OS】WebView调用JS并获取执行结果

【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);    }}

运行效果如下:

cke_10849.png

注:如果执行的js是不能编辑的页面,可以参考:
Android WebView 调用JS方法获取返回值_Luckie stone的博客-CSDN博客_js调用android的方法返回值

 

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh