HarmonyOS 鸿蒙Next web组件监听网页中的页面跳转
HarmonyOS 鸿蒙Next web组件监听网页中的页面跳转
点击web组件上已经展示的H5页面，如何拦截跳转地址，并打开新的webpage页面，而不是在当前web堆栈内打开
使用：onOverrideUrlLoading接听拿不到值
监听的前端页面地址为：https:xxxx
使用：onOverrideUrlLoading接听拿不到值
监听的前端页面地址为：https:xxxx
2 回复
参考demo是否满足你的使用场景
import { webview } from '[@kit](/user/kit).ArkWeb';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
controller1: webview.WebviewController = new webview.WebviewController();
controller2: webview.WebviewController = new webview.WebviewController();
[@State](/user/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() === 'https://XXXX') {
this.flag = true
} else {
this.flag = false
}
return false;
})
if (this.flag) {
Web({ src:'https://www.baidu.com', 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
}
}
更多关于HarmonyOS 鸿蒙Next web组件监听网页中的页面跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，Next web组件监听网页中的页面跳转可以通过特定的API接口实现。以下是实现该功能的简要说明：
HarmonyOS的Next web组件提供了用于与Web内容交互的接口，允许开发者监听网页中的事件，包括页面跳转。你可以使用组件提供的onNavigationEvent回调方法（假设存在此回调，具体名称可能因版本而异）来监听网页导航事件。
实现步骤如下：
-
初始化Next web组件：在布局文件中定义Next web组件，并在代码中初始化。
-
设置导航事件监听器：为Next web组件设置
onNavigationEvent监听器。在监听器内部，你可以获取到导航事件的详细信息，包括目标URL、导航类型等。 -
处理导航事件：根据业务需求，在监听器内部处理导航事件，例如阻止默认导航、记录日志或执行其他自定义逻辑。
示例代码（伪代码）：
// 假设nextWebComponent是已经初始化的Next web组件实例
nextWebComponent.setOnNavigationEventListener((event) => {
// 获取导航事件的详细信息
const url = event.url;
const type = event.type;
// 处理导航事件
// 例如，打印导航信息
console.log(`Navigating to: ${url}, Type: ${type}`);
// 根据需要阻止默认导航行为
// event.preventDefault();
});
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
