HarmonyOS 鸿蒙Next web内部跳转,如何拦截然后设置新的url并进行跳转

HarmonyOS 鸿蒙Next web内部跳转,如何拦截然后设置新的url并进行跳转 我现在使用onLoadIntercept，但是这个方法只能拦截并返回true 和false，我的场景是需要拦截住url后并对url进行修改，然后跳转到新的url。

2 回复

点击下一页按钮进行路由拦截可以跳到三级页面，具体请参考如下代码：

import web_webview from '@ohos.web.webview'
@Entry
@Component
struct H5Page {
  @State message: string = 'Hello World';
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Row() {
        Web({
          src: $rawfile('First.html'), 
          controller: this.controller
        })
          .onLoadIntercept((event) => {
            console.log('url:' + event.data.getRequestUrl())
            console.log('isMainFrame:' + event.data.isMainFrame())
            console.log('isRedirect:' + event.data.isRedirect())
            console.log('isRequestGesture:' + event.data.isRequestGesture())
            if (event.data.getRequestUrl() == 'resource://rawfile/Second.html') {
              this.controller.loadUrl($rawfile('Third.html'));
              return false
            }
            return false
          })
      }
      .height('100%')
    }
    .width('100%')
  }
}

// First.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>第一页</h1>
<button onclick="myFunction()">点击下一页</button>
<script type="text/javascript">
    function myFunction() {
       window.location.href = "Second.html";
    }
</script>
</body>
</html>

// Second.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>欢迎来到二级页面！</h1>
<p></p>
</body>
</html>

//Third.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>欢迎来到三级页面！</h1>
<p></p>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next web内部跳转,如何拦截然后设置新的url并进行跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，拦截Web内部跳转并设置新的URL可以通过WebView的setWebViewClient方法实现。具体步骤如下：

  1. 创建WebViewClient：自定义一个WebViewClient，重写shouldOverrideUrlLoading方法。该方法在WebView尝试加载新的URL时被调用。

  2. 拦截URL：在shouldOverrideUrlLoading方法中，判断当前URL是否符合拦截条件。如果符合，则返回true，表示拦截该URL。

  3. 设置新的URL：如果拦截了URL，可以通过WebView的loadUrl方法加载新的URL。

示例代码如下：

import webview from '@ohos.web.webview';

class CustomWebViewClient extends webview.WebViewClient {
    shouldOverrideUrlLoading(webView: webview.WebView, url: string): boolean {
        // 拦截条件判断
        if (url.includes("example.com")) {
            // 设置新的URL
            webView.loadUrl("https://new-url.com");
            return true; // 拦截该URL
        }
        return false; // 不拦截，继续加载原URL
    }
}

// 使用自定义的WebViewClient
let webView = new webview.WebView();
webView.setWebViewClient(new CustomWebViewClient());
webView.loadUrl("https://initial-url.com");

通过这种方式，可以在鸿蒙Next中实现Web内部跳转的拦截和URL的重新设置。

回到顶部