文档章节

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

HarmonyOS开发者
 HarmonyOS开发者
发布于 2023/09/19 18:01
字数 700
阅读 512
收藏 0

历史记录导航

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

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

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct 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.ets
import web_webview from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct 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
@Component
struct ProfilePage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}

跨应用跳转

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

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

? ● 应用侧代码。

// xxx.ets
import web_webview from '@ohos.web.webview';
import call from '@ohos.telephony.call';

@Entry
@Component
struct 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>


本文由博客一文多发平台 OpenWrite 发布!

HarmonyOS开发者
粉丝 2
博文 229
码字总数 172044
作品 0
深圳
私信 提问
加载中
点击引领话题?
深入解析:浏览器(Browser)在互联网技术中的作用与应用

好的,让我们开始吧! 深入解析:浏览器(Browser)在互联网技术中的作用与应用 在当今的数字化时代,互联网已经成为了我们生活中不可或缺的一部分。而在实现这一重要功能的背后,各种复杂的...

TGCspxtfs
11分钟前
0
0
深度剖析:RESTful API客户端技术详解——从feignclient到advanced algebra

深度剖析:RESTful API客户端技术详解——从feignclient到advanced algebra(Question) 随着互联网技术的快速发展,API已经成为应用程序之间通信的主要方式之一。然而,在选择合适的客户端技...

l-mfunf
12分钟前
0
0
深入解析 RESTful API 客户端技术:FeignClient、Client Number 与 Advanced Diploma

好的,我将根据以下问题撰写一篇关于深入解析 RESTful API 客户端技术(FeignClient、Client Number 与 Advanced Diploma)的技术文章。 问题:请深入解释 RESTful API 客户端技术以及 Feig...

Tufqifo
12分钟前
0
0
深入浅出:理解与运用REST客户端技术在NCLC中的应用

我正在生成关于互联网技术的一个主题:深入浅出:理解与运用REST客户端技术在NCLC中的应用。您可以将这个主题作为关键词,以帮助我开始进行研究、撰写和整理有关的内容。 以下是一个专业询问...

vsf-ifs
15分钟前
0
0
深入浅出:解析 RESTful API 客户端技术与实践应用

好的,让我们开始生成这篇文章吧! 深入浅出:解析 RESTful API 客户端技术与实践应用 随着互联网的快速发展,RESTful API(Representational State Transfer)已经成为应用程序之间通信的标...

抲歊-戒
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

{{formatHtml(o.title)}}

{{i}}-{{formatHtml(o.content)}}

{{o.author.name}}
{{o.pubDate | formatDate}}
{{o.viewCount | bigNumberTransform}}
{{o.replyCount | bigNumberTransform}}

暂无文章

便宜云服务器
登录后可查看更多优质内容
返回顶部
顶部
http://www.vxiaotou.com