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

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

HarmonyOS
2024-05-26 17:36:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
towerwan

本文主要描述在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>
分享
微博
QQ
微信
回复
2024-05-27 22:19:38
相关问题
如何在HarmonyOS中调试h5页面
367浏览 • 1回复 待解决
升级API11后h5页面字体变小了
647浏览 • 1回复 待解决
webview加载Vue h5失败
16162浏览 • 5回复 待解决
H5页面输入框自动获焦弹起软键盘
524浏览 • 1回复 待解决
H5页面如何与ArkTS交互
1462浏览 • 1回复 待解决
读取剪贴板是否需要READ_PASTEBOARD权限
581浏览 • 1回复 待解决
如何加载字符串形式H5数据
642浏览 • 1回复 待解决
Web中webviewH5交互
454浏览 • 1回复 待解决
如何在webview中使用H5alert
547浏览 • 1回复 待解决
Web能直接加载h5代码吗?
1672浏览 • 2回复 待解决
如何实现H5自定义事件
820浏览 • 1回复 待解决