webview容器加载h5页面之获取剪贴板的数据

HarmonyOS

落月无痕

2024-05-26 17:36:59

浏览

回答 1

待解决

回答 1

按赞同

按时间

鸡翅可乐

本文主要描述在web容器里加载js，html，与h5的一个交互过程以及在h5页面实现获取剪贴板的数据并加载在webview容器中，包括在应用侧调用前端数据以及使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

使用的核心API

javaScriptProxy

registerJavaScriptProxy

clipboard

核心代码解释

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。在web初始化时调用，注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy。

应用侧：

import web_webview from '@ohos.web.webview' 
 
class AndroidJsBridge { 
  constructor(webController: web_webview.WebviewController) { 
    this.webController = webController 
    console.info("asdasdasdas123123" + this.webController) 
  } 
 
  requestNative(json: string) { 
    console.info("asdasdasdas") 
  } 
} 
 
 
@Entry 
@Component 
struct Test1027 { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  //声明需要注册的对象 
  @State androidJsBj: AndroidJsBridge = new AndroidJsBridge(this.controller) 
 
  build() { 
    Row() { 
      Column() { 
        // Button('Register JavaScript To Window').onClick(() => { 
        //   this.controller.registerJavaScriptProxy(this.androidJsBj, 'androidJsBridgeKit', ["requestNative","responseNative"]); 
        // }) 
        // 
        // Button('refresh').onClick(() => { 
        //   this.controller.refresh(); 
        // }) 
        Web({ src: $rawfile('Test1027.html'), controller: this.controller }) 
          .javaScriptAccess(true) 
          .javaScriptProxy({ 
            object: this.androidJsBj, 
            name: "androidJsBridgeKit", 
            methodList: ["requestNative"], 
            controller: this.controller 
          }) 
      } 
    } 
  } 
}

h5侧：

<html> 
<body> 
<h1>1111111111</h1> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<h2>1111111111</h2> 
<button type="button" onclick="callArkTS()">Click Me!</button> 
<button type="button" onclick="callArkTS2()">Click Me!</button> 
<p id="demo"></p> 
</body> 
<script type="text/javascript"> 
    function callArkTS() { 
        let str = PAITNativeBridgeHandle.postMessage(); 
        document.getElementById("demo").innerHTML = str; 
        console.info('ArkTS Hello World! :' + str); 
    } 
     function callArkTS2() { 
        let str = androidJsBridgeKit.requestNative(); 
        document.getElementById("demo").innerHTML = str; 
        console.info('ArkTS Hello World! :' + str); 
    } 
</script> 
</html>

剪贴板Clipboard API提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API (en-US) 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。第一步，先写一个html+js，这个html里面需要用到canvas绘制图片，然后调用clipboard的方法，第二步，将这个html加载到HarmonyOS的webview里面。

应用侧：

import web_webview from '@ohos.web.webview' 
import hilog from '@ohos.hilog' 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  build() { 
    Column() { 
      Web({ src: $rawfile("test1121.html"), controller: this.controller }) 
        .onContextMenuShow((e)=>{ 
          if (e?.param?.existsImageContents()) { 
            hilog.info(0x0000, 'testTag', '%{public}s', 'onContextMenuShow'); 
            e?.result?.copyImage() 
          } 
 
          return true 
        }) 
    } 
  } 
}

h5侧：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
</head> 
<body> 
<button onclick="getClip()">获取剪切板的数据</button> 
<img src="" id="destination"/> 
</body> 
<script> 
    function getClip(){ 
        const destinationImage = document.querySelector("#destination"); 
        navigator.clipboard.read().then((text)=>{ 
            console.log(text) 
         for (const item of text) { 
            if (!item.types.includes("image/png")) { 
                throw new Error("Clipboard contains non-image data."); 
            } 
            const blob =  item.getType("image/png").then(blob=>{ 
                console.log(blob) 
                destinationImage.src = URL.createObjectURL(blob); 
            }); 
        } 
    }) 
    } 
</script> 
</html>

2024-05-27 22:19:38

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

webview容器加载h5页面之获取剪贴板的数据

订阅鸿蒙技术特刊，精选内容抢先看