Criação de Sites, Manutenção de Sites e Links Patrocinados - Appearweb

Como abrir url externa no Ionic 4?

Ionic 4: Saiba qual e como utilizar o plugin para abrir url externa

Atualizado: 21/04/2020 - 09:04 | Cadastrado: 21/04/2020 - 08:04
Compartilhe

Para abrir url externa no Ionic 4 é necessário o plugin inappbrowser, confira abaixo as linhas de comando:
ionic cordova plugin add cordova-plugin-inappbrowser
--save npm install --save @ionic-native/in-app-browser

Depois de instalados é necessário importar o plugin no arquivo app.module.ts utilizando a linha de comando abaixo:
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

No mesmo arquivo, é necessário adicionar InAppBrowser na linha providers, exemplo:
providers :[ InAppBrowser, ...]

No modulo page que você vai utilizar o função, é necessário importar plugin utilizando a linha abaixo, veja que agora também podemos utilizar o InAppBrowserOptions:
import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';

Após a importação, é necessário adicionar o modulo no método constructor:
constructor(private theInAppBrowser: InAppBrowser) {}

Antes do constructor criei o atributo options conforme as linhas abaixo, esse atributo serve para configurar o link que será aberto. 
options : InAppBrowserOptions = {
    location : 'yes',//Or 'no'
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',//Android only ,shows browser zoom controls
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only
    toolbar : 'yes', //iOS only
    enableViewportScale : 'no', //iOS only
    allowInlineMediaPlayback : 'no',//iOS only
    presentationstyle : 'pagesheet',//iOS only
    fullscreen : 'yes',//Windows only    
};

Abaixo um exemplo do método utilizando o plugin, é necessário passar a url completa que quer abrir e definir o target, no caso será _blank, olha o exemplo:
openUrlExterna(url : string){
    let target = "_blank";
    this.theInAppBrowser.create(url,target,this.options);
}

Imaginando um exemplo, no module page utilizando um button, poderia ser passado da seguinte maneira:
<ion-button on-click="openUrlExterna(http://www.appearweb.com.br/)">Acessar Link</ion-button>

Nos ajude curtindo ou compartilhando esse conteúdo, sucesso!

Ganhe dinheiro com seu Blog

Ganhe dinheiro com seu Blog

Saiba Mais
Mini Site para Rede Social

Mini Site para Rede Social

Saiba Mais
E-Book Grátis: Pegue o Seu Guia Sobre React, View e PHP

E-Book Grátis: Pegue o Seu Guia Sobre React, View e PHP

Saiba Mais
Comece a Ganhar Dinheiro Trabalhando Em Casa Hoje

Comece a Ganhar Dinheiro Trabalhando Em Casa Hoje

Saiba Mais
Aprenda HTML, CSS, JavaScript, Bootstrap, PHP, MySQL na Udemy

Aprenda HTML, CSS, JavaScript, Bootstrap, PHP, MySQL na Udemy

Saiba Mais

Veja Também