HarmonyOS 鸿蒙Next web组件内部调用window.location.href没有跳转到新的页面打开

HarmonyOS 鸿蒙Next web组件内部调用window.location.href没有跳转到新的页面打开 【设备信息】Mate 60
【API版本】Api14
【DevEco Studio版本】5.0.7.200
【问题描述】 web组件内部调用window.location.href没有跳转到新的页面打开

2 回复

可以参考demo,弹窗里面有一个百度页面,点击百度页面上的链接,会进行拦截,然后重新开一个原生web页面来加载子页面

【index.ets】文件
import { router } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

class routerParams {
  src: string
  constructor(str:string) {
    this.src = str;
  }
}

@Entry
@Component
struct DialogFirst {
  controller: webview.WebviewController = new webview.WebviewController();
  @State textValue: string = 'xxxx'
  @State visible: Visibility = Visibility.None
  onPageShow() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      this.textValue = params.info as string; // 获取info属性的值
    }
  }
  build() {
    Stack() {
      // 初始页面
      Row() {
        Column() {
          Text('Hello World')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          Button('click')
            .onClick(() => {
              console.log("hit me!")
              if (this.visible == Visibility.Visible) {
                this.visible = Visibility.None
              } else {
                this.visible = Visibility.Visible
              }
            })
            .backgroundColor(0x777474)
            .fontColor(0x000000)
        }
        .width('100%')
      }
      .height('100%')
      .backgroundColor(0x885555)
      //加了一个半透明灰色的蒙层效果
      Text('')
        .onClick(() => {
          if (this.visible == Visibility.Visible) {
            this.visible = Visibility.None
          } else {
            this.visible = Visibility.Visible
          }
        })
        .width('100%')
        .height('100%')
        .opacity(0.16)
        .backgroundColor(0x000000)
        .visibility(this.visible)
      // 弹框内容
      Column() {
        Column() {
          Web({ src: "http://www.baidu.com", controller: this.controller })
            .javaScriptAccess(true)
            .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => {
              if (webResourceRequest && webResourceRequest.getRequestUrl() != "https://www.baidu.com/") {
                let url = webResourceRequest.getRequestUrl()        
                router.pushUrl({
                  url: 'pages/Index2',
                  params: new routerParams(url)
                })
                return true;
              }
              return false;
            })
            .height('60%')
        }
        .backgroundColor(0xffffff)
        .visibility(this.visible)
        .clip(true)
        .borderRadius(20)
      }.width('95%') //设置弹窗宽度
    }
  }
}

--------------------------------------------------------------------------------------------------------------
【Index2.ets】文件
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';

class routerParams {
  src:string = ''
}

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  dialogController: CustomDialogController | null = null;

  @State params: routerParams = router.getParams() as routerParams;
  @State src: string = this.params.src;

  build() {
    Column() {
      Web({ src: this.src, controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next web组件内部调用window.location.href没有跳转到新的页面打开的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,Web组件内部调用window.location.href未跳转到新页面,可能是由于鸿蒙系统的安全机制或页面加载策略限制了默认的跳转行为。鸿蒙系统的WebView组件可能会拦截或阻止某些URL跳转操作,以确保应用的安全性和稳定性。可以检查Web组件的配置,确认是否启用了允许跳转的选项。此外,确保URL格式正确且目标页面可访问。如果问题依旧存在,可能需要进一步分析鸿蒙系统对Web组件的行为限制。

回到顶部