Abrir URLs externas con Ionic Framework puede parecer sencillo pero en realidad supone un verdadero problema ya que al ser una aplicación híbrida se ejecuta sobre un navegador interno, por lo que al abrir cualquier URL esta se abrirá dentro de ese navegador que usa Cordova.Este problema puede solucionarse con el plugin Cordova “InAppBrowser“, que se encargará de lanzar el navegador por defecto del dispositivo con la URL que le indiquemos.
Para instalarlo simplemente ejecutamos este comando sobre la raíz del proyecto:
|
1 |
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git |
Ahora simplemente tenemos que usar el siguiente formato para abrir las URLs, se puede usar tanto desde Javascript como desde las vistas:
|
1 2 3 4 5 |
window.open(‘http://example.com’, ‘_system’); //Abre la URL en el navegador del sistema window.open(‘http://example.com’, ‘_blank’); //Abre la URL en el navegador de InAppBrowser window.open(‘http://example.com’, ‘_self’); //Abre la URL dentro de la propia aplicación Cordova |
Desde las vistas simplemente usamos el mismo formato dentro del atributo “onclick”:
|
1 |
<a class="item" href="#" onclick="window.open('http://example.com/contact', '_system'); return false;> |
Usar _system resulta ser la mejor opción ya que si abrimos una URL por ejemplo de Google+ o Twitter, esta se abrirá en la aplicación correspondiente si está instalada.