歷史記錄導航

使用者在前端頁面點選網頁中的連結時，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
: 
'
,
 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>

HarmonyOS 管理頁面跳轉及瀏覽記錄導航

頁面跳轉

跨應用跳轉

相關文章