Madogiwa Blog

主に技術系の学習メモに使っていきます。

ionicでWebサイトへのリンクを貼る。

ionicでWebサイトへのリンクを貼る方法をメモφ(..)

↓こんな感じ  f:id:madogiwa0124:20171002223836p:plain

手順

.htmlファイルにリンクを置く

.htmlファイル内に通常のWebアプリケーションと同様に<a>...</a>を配置します。
配置したリンクには(click)でクリックイベントを定義し、.tsで定義したopenWebSite()メソッドを呼び出します。

<a href="#" (click)="openWebSite(page.url)">{{page.title}}</a>

 

.tsでWebサイトを開く処理を実装する。

.ts内にメソッドを定義し、window.open()メソッドに引数としてURLを渡します。
urlと合わせて_system及びlocation=yesを引数として渡していますが、_systemはシステムのブラウザでリンクを開くことを表し、location=yesはアドレスバーの有無を意味します。

export class PageIndexPage {
  /* 省略 */
  openWebSite(url) {
    window.open(url, '_system', 'location=yes');
    return false;
  }
  
}

以上のやり方でWebサイトへのリンクを貼ることが出来ました・ω・

参考

window.open - Apache Cordova

www.thepolyglotdeveloper.com