共计 2341 个字符，预计需要花费 6 分钟才能阅读完成。
历史记录导航
使用者在前端页面点击网页中的链接时，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> | |
正文完
