历史记录导航
使用者在前端页面点击网页中的链接时，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>