HarmonyOS 鸿蒙Next 想要拦截web里面点击链接后新界面的url

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 想要拦截web里面点击链接后新界面的url

想要拦截web里面点击链接后新界面的url
onLoadIntercept这个方法可以实现吗？加了后网页就加载不出来了

Harmonyos Next教程
2 回复

 onLoadIntercept 是当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载

onInterceptRequest 是当Web组件加载url之前触发该回调，用于拦截url并返回响应数据的接口

Web组件的onLoadIntercept的不同返回结果对应不同的操作：

                            onLoadIntercept返回true则直接拦截URL请求。

                            onLoadIntercept返回false走onInterceptRequest回调。

深色代码主题
复制
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  responseWeb: WebResourceResponse = new WebResourceResponse();
  heads: Header[] = new Array();
  @State webData: string = "<!DOCTYPE html>\n" +
    "<html>\n" +
    "<head>\n" +
    "<title>intercept test</title>\n" +
    "</head>\n" +
    "<body>\n" +
    "<h1>intercept test</h1>\n" +
    "</body>\n" +
    "</html>";
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onInterceptRequest((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl());
          }
          let head1: Header = {
            headerKey: "Connection",
            headerValue: "keep-alive"
          }
          let head2: Header = {
            headerKey: "Cache-Control",
            headerValue: "no-cache"
          }
          let length = this.heads.push(head1);
          length = this.heads.push(head2);
          const promise: Promise<String> = new Promise((resolve: Function, reject: Function) => {
            this.responseWeb.setResponseHeader(this.heads);
            this.responseWeb.setResponseData(this.webData);
            this.responseWeb.setResponseEncoding('utf-8');
            this.responseWeb.setResponseMimeType('text/html');
            this.responseWeb.setResponseCode(200);
            this.responseWeb.setReasonMessage('OK');
            resolve("success");
          })
          promise.then(() => {
            console.log("prepare response ready");
            this.responseWeb.setResponseIsReady(true);
          })
          this.responseWeb.setResponseIsReady(false);
          return this.responseWeb;
        })
    }
  }
}
深色代码主题
复制
指南参考链接： 【  https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onloadintercept10  】

更多关于HarmonyOS 鸿蒙Next 想要拦截web里面点击链接后新界面的url的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若你想拦截Web页面中点击链接后即将跳转的新界面URL，可以通过以下方式实现。

首先，你需要使用HarmonyOS提供的ArkUI框架来构建你的Web视图组件。ArkUI框架支持通过JavaScript与前端页面进行交互。你可以在Web视图的onPageFinished事件中添加一个监听器，该监听器会在页面加载完成后执行。

接下来，你可以通过JavaScript注入的方式，在Web页面中添加自定义的点击事件监听器。这个监听器会在用户点击链接时触发，并获取点击事件的target URL。然后，你可以通过JS接口将这个URL传递给ArkUI层的JavaScript运行环境。

在ArkUI层接收到这个URL后，你可以根据业务逻辑进行拦截处理，比如显示一个确认跳转的对话框，或者在日志中记录这个URL而不实际进行跳转。

示例代码如下（仅展示关键逻辑）：

// 在Web页面中注入的JavaScript代码
document.addEventListener('click', function(event) {
    var target = event.target;
    while (target && target.tagName !== 'A') {
        target = target.parentElement;
    }
    if (target) {
        window.postMessage(target.href, '*');
    }
});

// 在ArkUI层接收消息并处理
webView.onMessageReceived((message) => {
    const url = message.data;
    // 在这里进行URL拦截处理
});

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部