Ionic/Angular: Jak otworzyć link w przeglądarce telefonu(systemowej)

Ionic/Angular: Jak otworzyć link w przeglądarce telefonu(systemowej)

W artykule przedstawiam dwie metody, które pozwolą Ci na otworzenie z poziomu aplikacji Ionic dowolnej strony WWW w domyślnej przeglądarce telefonu.

Kod przykładowej aplikacji znajdziesz w repozytorium GitLab.

Metoda 1: Bezpośrednio w szablonie HTML

Pierwszą metodę podaję w zasadzie jako ciekawostkę, aby pokazać, że efekt otwarcia strony w przeglądarce systemowej uzyskujemy poprzez zawołanie zwykłego polecenia JavaScript window.open. Od razu rzuca się w oczy przekazanie jako target wartości _system zamiast _blank. Dzięki temu Ionic będzie wiedzieć, aby wskazany w pierwszym parametrze URL otworzyć w domyślnej przeglądarce telefonu.

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title>
            Demo: Open link in system browser
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">Demo: Open link in system browser</ion-title>
        </ion-toolbar>
    </ion-header>

    <div id="container">
        <ion-button onclick="window.open('https://better-coding.com', '_system', 'location=yes'); return false;">Open link: Html template</ion-button>
    </div>
</ion-content>

Metoda 2: Za pomocą metody w TypeScript

Skoro wiemy już w jaki sposób otworzyć zewnętrzną stronę WWW w przeglądarce telefonu, to możemy sprowadzić ją do bardziej użytecznej formy – mianowicie metody w TypeScript. Może ona wyglądać następująco:

openLinkInSystemBrowser(url: string) {
  window.open(url, '_system', 'location=yes');
}

Poniżej znajduje się przykład użycia metody openLinkInSystemBrowser w kodzie aplikacji.

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title>
            Demo: Open link in system browser
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">Demo: Open link in system browser</ion-title>
        </ion-toolbar>
    </ion-header>

    <div id="container">
        <ion-button onclick="window.open('https://better-coding.com', '_system', 'location=yes'); return false;">Open link: Html template</ion-button>
        <ion-button (click)="openLinkInSystemBrowser('https://better-coding.com')">Open link: TypeScript method</ion-button>
    </div>
</ion-content>
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  openLinkInSystemBrowser(url: string) {
    window.open(url, '_system', 'location=yes');
  }
  
}

Obejrzyj w YouTube

Na zakończenie mam jeszcze jedną prośbę.

Jeśli pomogłem Ci rozwiązać problem, to udostępnij proszę ten post. Dzięki temu będę miał okazję trafić do szerszej grupy odbiorców. Dziękuję

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 komentarzy
Inline Feedbacks
View all comments