问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS web组件监听网页中的页面跳转？

头像
HarmonyOS码上奇行
    12k3121

    点击web组件上已经展示的H5页面，如何拦截跳转地址，并打开新的webpage页面，而不是在当前web堆栈内打开，使用onOverrideUrlLoading监听拿不到值。

    HarmonyOSharmonyosharmonyos-next
    阅读 845
    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12k3121

      参考demo：

      import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller1: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State flag:boolean = false
  build() {
    Stack() {
      Web({ src: $rawfile('index4.html'), controller: this.controller1 })
        .onPageEnd(() => {
          console.log("加载第一个web组件")
        })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onLoadIntercept((event) => {
          if (event.data.getRequestUrl() === 'xxx') {
            this.flag = true
          } else {
            this.flag = false
          }
          return false;
        })
      if (this.flag) {
        Web({ src:'xxxx', controller: this.controller2 })
          .onPageEnd(() => {
            console.log("加载第二个web组件")
          })
          .javaScriptAccess(true).domStorageAccess(true).mixedMode(MixedMode.All).zIndex(999)
      }
    }
  }
  onBackPress() {
    try {
      if (this.flag) {
        if (this.controller2.accessBackward()) {
          this.controller2.backward()
        }else {
          this.flag = false
        }
        return true
      }else {
        if (this.controller1.accessBackward()) {
          this.controller1.backward()
          return true
        }
      }
    } catch (error) {
      console.error(`ErrorCode: ${error?.code},  Message: ${error?.message}`);
    }
    return false
  }
}

      h5：

      <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="xxx"></script>
  <script>
  window.vConsole = new window.VConsole()
  </script>
  <body>
  Hello world!
  <a href="xxx">打开xxx</a>
  <a href="/index.html">打开其他页面</a>
  </body>
  <script>
  </script>
  </html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题