热门搜索:
您现在的位置是：首页 > 文章详情

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

日期：2023-09-19点击：82

历史记录导航

使用者在前端页面点击网页中的链接时，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 发布！

原文链接：https://my.oschina.net/HarmonyOS/blog/10111944
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章