devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Harmony OS】WebView调用JS并获取执行结果_鸿蒙webview 导入js

作者：Cpp五条 | 2024-03-17 22:26:03

赞

踩

鸿蒙webview 导入js

WebView提供了在应用中集成Web页面的能力。在日常的开发中也会经常用到。
WebView派生于通用组件Component，可以像普通组件一样进行使用。
今天我们就介绍如何在应用内调用页面内的JavaScript方法。
参考网址：
文档中心
代码实现：
html代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <meta charset="UTF-8">
  4.     <title>本地html</title>
  5.     <body>
  6.         <br>
  7.         <h1 id="helloName">这是一个本地HTML页面</h1>
  8.         <br>
  9.         <button
  10.                 id="button"
  11.                                style="background-color:#70DBDB;height:30px;">调用Java方法
  12.         </button>
  13.  
  14.         <input style="background-color:#70DBDB;height:30px; " >
  15.  
  16.         <script type="text/javascript">
  17.         // 应用调用Web页面
  18.         function callJS(message) {
  19.             alert(message);
  20.             return '123'
  21.         }
  22.  
  23.         function sendData() {
  24.             if (window.JsCallJava && window.JsCallJava.call) {
  25.                 // Web页面调用应用
  26.                 var rst = window.JsCallJava.call("这个是来自本地Web页面的消息");
  27.             } else {
  28.                 alert('发送消息给WebviewSlice失败');
  29.             }
  30.         }
  31.  
  32. function getCookie(name) {
  33.     var prefix = name + "="
  34.     var start = document.cookie.indexOf(prefix)
  35.  
  36.     if (start == -1) {
  37.         return null;
  38.     }
  39.  
  40.     var end = document.cookie.indexOf(";", start + prefix.length)
  41.     if (end == -1) {
  42.         end = document.cookie.length;
  43.     }
  44.  
  45.     var value = document.cookie.substring(start + prefix.length, end)
  46.     return unescape(value);
  47. }
  48.  
  49.         </script>
  50.     </body>
  51. </html>

xml代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">
  7.     <Image
  8.         ohos:id="$+id:myImage"
  9.         ohos:height="100vp"
  10.         ohos:width="100vp"
  11.         ohos:image_src="$media:icon"/>
  12.  
  13.     <ohos.agp.components.webengine.WebView
  14.         ohos:id="$+id:webview"
  15.         ohos:height="0vp"
  16.         ohos:weight="1"
  17.         ohos:width="match_parent">
  18.     </ohos.agp.components.webengine.WebView>
  19.  
  20. </DirectionalLayout>

Java代码如下：

  1. package com.example.newwebview.slice;
  2.  
  3. import com.example.newwebview.ResourceTable;
  4. import com.example.newwebview.utils.HiLogUtils;
  5. import ohos.aafwk.ability.AbilitySlice;
  6. import ohos.aafwk.content.Intent;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.webengine.*;
  9. import ohos.agp.render.BlendMode;
  10. import ohos.agp.render.Paint;
  11. import ohos.agp.utils.TextTool;
  12. import ohos.agp.window.service.WindowManager;
  13. import ohos.global.resource.Resource;
  14. import ohos.hiviewdfx.HiLog;
  15. import ohos.media.image.ImagePacker;
  16. import ohos.media.image.PixelMap;
  17. import ohos.media.image.common.PixelFormat;
  18. import ohos.media.image.common.Size;
  19. import ohos.utils.net.Uri;
  20.  
  21. import java.io.*;
  22. import java.net.*;
  23.  
  24. public class WebViewAbility extends AbilitySlice {
  25.     private static final String URL_LOCAL = "dataability://example.com/rawfile/example.html";
  26.     @Override
  27.     protected void onStart(Intent intent) {
  28.         super.onStart(intent);
  29.         setUIContent(ResourceTable.Layout_new_web_view);
  30.         getWindow().setInputPanelDisplayType(WindowManager.LayoutConfig.INPUT_ADJUST_PAN);
  31.         WebView webview= (WebView) findComponentById(ResourceTable.Id_webview);
  32.         // 是否支持Javascript，默认值false
  33.         webview.getWebConfig().setJavaScriptPermit(true);
  34.  
  35.         webview.setWebAgent(new WebAgent() {
  36.             @Override
  37.             public ResourceResponse processResourceRequest(WebView webView, ResourceRequest request) {
  38.                 final String authority = "example.com";
  39.                 final String rawFile = "/rawfile/";
  40.                 final String local = "/local/";
  41.                 Uri requestUri = request.getRequestUrl();
  42.                 if (authority.equals(requestUri.getDecodedAuthority())) {
  43.                     String path = requestUri.getDecodedPath();
  44.                     if (TextTool.isNullOrEmpty(path)) {
  45.                         return super.processResourceRequest(webView, request);
  46.                     }
  47.                     if (path.startsWith(rawFile)) {
  48.                         // 根据自定义规则访问资源文件
  49.                         String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
  50.                         String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
  51.                         try {
  52.                             Resource resource = getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
  53.                             ResourceResponse response = new ResourceResponse(mimeType, resource, null);
  54.                             return response;
  55.                         } catch (IOException e) {
  56. //                            HiLog.info(TAG, "open raw file failed");
  57.                         }
  58.                     }
  59.                     if (path.startsWith(local)) {
  60.                         // 根据自定义规则访问本地文件
  61.                         String localFile = getContext().getFilesDir() + path.replace(local, "/");
  62. //                        HiLog.info(TAG, "open local file " + localFile);
  63.                         File file = new File(localFile);
  64.                         if (!file.exists()) {
  65. //                            HiLog.info(TAG, "file not exists");
  66.                             return super.processResourceRequest(webView, request);
  67.                         }
  68.                         String mimeType = URLConnection.guessContentTypeFromName(localFile);
  69.                         try {
  70.                             InputStream inputStream = new FileInputStream(file);
  71.                             ResourceResponse response = new ResourceResponse(mimeType, inputStream, null);
  72.                             return response;
  73.                         } catch (IOException e) {
  74. //                            HiLog.info(TAG, "open local file failed");
  75.                         }
  76.                     }
  77.                 }
  78.                 return super.processResourceRequest(webView, request);
  79.             }
  80.  
  81.  
  82.  
  83.         });
  84.         webview.setBrowserAgent(new BrowserAgent(WebViewAbility.this){
  85.             @Override
  86.             public boolean onJsMessageShow(WebView webView, String url, String message, boolean isAlert, JsMessageResult result) {
  87.  
  88.                 HiLogUtils.PrintLog(url);
  89.                 return false;
  90.             }
  91.         });
  92.  
  93.  
  94.         webview.load(URL_LOCAL);
  95.       findComponentById(ResourceTable.Id_myImage).setClickedListener(new Component.ClickedListener() {
  96.           @Override
  97.           public void onClick(Component component) {
  98.               webview.executeJs("callJS('这是来自JavaSlice的消息')", msg -> {
  99.                   // 在这里处理Java调用Js的方法的返回值
  100.                   HiLogUtils.PrintLog("msg====>>>"+msg);
  101.               });
  102.           }
  103.       });
  104.  
  105.  
  106.     }
  107.  
  108.     private void setWindowBgToAdaptWebView() {
  109.         final String backgroundFileName = "_bg.jpg";
  110.         File file = new File(getContext().getFilesDir(), backgroundFileName);
  111.         if (file.exists()) {
  112.             getWindow().setBackground(file.getPath());
  113.             return;
  114.         }
  115.         PixelMap pixelMap = createBgPixelMap();
  116.         if (pixelMap == null) {
  117.             return;
  118.         }
  119.         ImagePacker imagePacker = ImagePacker.create();
  120.         try (OutputStream outputStream = new FileOutputStream(file)) {
  121.             ImagePacker.PackingOptions options = new ImagePacker.PackingOptions();
  122.             if (!imagePacker.initializePacking(outputStream, options)) {
  123.                 return;
  124.             }
  125.             if (!imagePacker.addImage(pixelMap)) {
  126.                 return;
  127.             }
  128.             if (imagePacker.finalizePacking() < 0) {
  129.                 return;
  130.             }
  131.         } catch (IOException e) {
  132.             e.printStackTrace();
  133.         } finally {
  134.             imagePacker.release();
  135.         }
  136.  
  137.     }
  138.  
  139.  
  140.  
  141.     private PixelMap createBgPixelMap() {
  142.  
  143.         final int length = 10;
  144.  
  145.         PixelMap.InitializationOptions initializationOptions = new PixelMap.InitializationOptions();
  146.  
  147.         initializationOptions.size = new Size(length, length);
  148.  
  149.         initializationOptions.pixelFormat = PixelFormat.ARGB_8888;
  150.  
  151.         initializationOptions.editable = true;
  152.  
  153.         int[] defaultColors = new int[length * length];
  154.  
  155.         return PixelMap.create(defaultColors, initializationOptions);
  156.  
  157.     }
  158.  
  159. }

运行效果如下：

cke_10849.png

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

 

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号