HarmonyOS 鸿蒙Next:在webView组件中点击链接打开ETS编写的page并在其webview中显示链接内容

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

HarmonyOS 鸿蒙Next:在webView组件中点击链接打开ETS编写的page并在其webview中显示链接内容 在 webView 组件中,如何可以点击一个 链接的时候,打开另外一个ETS 写的一个 page,在这个 page 的 webview 中显示链接的内容

2 回复

参考:

import web_webview from '@ohos.web.webview'
import { router } from '@kit.ArkUI';
@Entry
@Component
struct IR240906175344127 {
  @State message: string = 'Hello World';
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Text('router').onClick(()=>{
        router.pushUrl({
          url: 'pages/IR240906175344127_2',
          params: 'event.request.getRequestUrl()'
        })
      })
      Web({ src: $rawfile('IR240906175344127.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onLoadIntercept((event) => {
          if (event.data.getRequestUrl()==='https://www.baidu.com/') {
            console.log('===================================')
            router.pushUrl({
              url: 'pages/IR240906175344127_2',
              params: {
                url: event.data.getRequestUrl()
              }
            })
            return true;
          }
          console.log('url:' + event.data.getRequestUrl());
          console.log('isMainFrame:' + event.data.isMainFrame());
          console.log('isRedirect:' + event.data.isRedirect());
          console.log('isRequestGesture:' + event.data.isRequestGesture());
          return false
        })
    }
    .height('100%')
    .width('100%')
  }
}
import web_webview from '@ohos.web.webview'
import { router } from '@kit.ArkUI';
@Entry
@Component
struct IR240906175344127_2 {
  @State message: string = 'Hello World';
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  url: string = (router.getParams() as Record<string, string>)['url']
  onPageShow(): void {
    console.log(this.url+'1111111111111111111111111111111')
  }
  build() {
    Column() {
      Text('IR240906175344127_2')
      Web({ src: this.url, controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next:在webView组件中点击链接打开ETS编写的page并在其webview中显示链接内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,若你希望在webView组件中点击链接后打开ETS(Extend TypeScript)编写的页面,并在该页面的webView中显示链接内容,可以通过以下方式实现:

  1. 拦截链接点击事件:在webView组件中,通过监听链接点击事件来捕获用户点击的URL。

  2. 页面跳转:根据捕获的URL,使用导航能力跳转到ETS编写的目标页面。这通常涉及将URL作为参数传递给新页面。

  3. 在新页面中加载链接内容:目标ETS页面接收到URL参数后,在其webView组件中加载该URL,以显示链接内容。

具体实现时,你需要确保webView组件已正确配置事件监听,且页面跳转机制(如路由管理)已设置好。同时,目标ETS页面需能够接收并处理传递过来的URL参数。

请注意,由于HarmonyOS平台的具体API和实现细节可能随版本更新而变化,因此上述步骤可能需要根据你使用的HarmonyOS版本进行调整。

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

回到顶部