HarmonyOS 管理页面跳转及浏览记录导航

历史记录导航

使用者在前端页面点击网页中的链接时,Web 组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时,会自动记录已经访问的网页地址。可以通过forward()backward()接口向前/向后浏览上一个/下一个历史记录。

在下面的示例中,点击应用的按钮来触发前端页面的后退操作。

复制代码
// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {  webviewController: web_webview.WebviewController = new web_webview.WebviewController();  build() {    Column() {      Button('loadData')        .onClick(() => {          if (this.webviewController.accessBackward()) {            this.webviewController.backward();            return true;          }        })      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})    }  }}

如果存在历史记录,accessBackward()接口会返回 true。同样,您可以使用accessForward()接口检查是否存在前进的历史记录。如果您不执行检查,那么当用户浏览到历史记录的末尾时,调用forward()backward()接口时将不执行任何操作。

页面跳转

当点击网页中的链接需要跳转到应用内其他页面时,可以通过使用 Web 组件的onUrlLoadIntercept()接口来实现。

在下面的示例中,应用首页 Index.ets 加载前端页面 route.html,在前端 route.html 页面点击超链接,可跳转到应用的 ProfilePage.ets 页面。

● 应用首页 index.ets 页面代码。

复制代码
// index.etsimport web_webview from '@ohos.web.webview';import router from '@ohos.router';@Entry@Componentstruct WebComponent {  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {    Column() {      Web({ src: $rawfile('route.html'), controller: this.webviewController })        .onUrlLoadIntercept((event) => {          let url: string = event.data as string;          if (url.indexOf('native://') === 0) {            // 跳转其他界面            router.pushUrl({ url:url.substring(9) })            return true;          }          return false;        })    }  }}

● route.html 前端页面代码。

复制代码
<!-- route.html --><!DOCTYPE html><html><body>  <div>      <a href="native://pages/ProfilePage">个人中心</a>   </div></body></html>

● 跳转页面 ProfilePage.ets 代码。

复制代码
@Entry@Componentstruct ProfilePage {  @State message: string = 'Hello World';
  build() {    Column() {      Text(this.message)        .fontSize(20)    }  }}

跨应用跳转

Web 组件可以实现点击前端页面超链接跳转到其他应用。

在下面的示例中,点击 call.html 前端页面中的超连接,跳转到电话应用的拨号界面。

● 应用侧代码。

复制代码
// xxx.etsimport web_webview from '@ohos.web.webview';import call from '@ohos.telephony.call';
@Entry@Componentstruct WebComponent {  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {    Column() {      Web({ src: $rawfile('xxx.html'), controller: this.webviewController})        .onUrlLoadIntercept((event) => {          let url: string = event.data as string;          // 判断链接是否为拨号链接          if (url.indexOf('tel://') === 0) {            // 跳转拨号界面            call.makeCall(url.substring(6), (err) => {              if (!err) {                console.info('make call succeeded.');              } else {                console.info('make call fail, err is:' + JSON.stringify(err));              }            });            return true;          }          return false;        })    }  }}

● 前端页面 call.html 代码。

复制代码
<!-- call.html --><!DOCTYPE html><html><body>  <div>    <a href="tel://xxx xxxx xxx">拨打电话</a>  </div></body></html>
相关推荐
zhanshuo7 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo7 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish79812 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw18 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
小徐不徐说1 天前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos