phonegap abrir enlace en el navegador

114
<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>

Hola, expertos, estoy usando phonegap 2.9.0 y estoy usando el código anterior para abrir el enlace en el navegador, pero lo abre en la misma aplicación ... ¿cómo abrir el navegador Safari?

abre el sitio web en la misma aplicación y luego no puedo volver a la aplicación, así que necesito eliminar la aplicación e instalarla nuevamente .....

ahsan ali
fuente
Si desea abrir _blankun navegador externo y _selfWebView, consulte mi solución 2015 para Cordova 5.1.1: stackoverflow.com/a/32227524/82609
Sebastien Lorber
Consulte también las respuestas en una pregunta similar: stackoverflow.com/a/26176013/1480587 y stackoverflow.com/a/46619378/1480587
Peter T.

Respuestas:

225

Como se sugiere en una pregunta similar , use JavaScript para llamar window.opencon el targetargumento establecido en _system, según la documentación de InAppBrowser :

<a href="#" onclick="window.open('http://www.kidzout.com', '_system'); return false;">www.kidzout.com</a>

Esto debería funcionar, aunque una solución mejor y más flexible sería interceptar todos los clickeventos de los enlaces y llamar window.opencon argumentos leídos de los atributos del enlace.

Recuerde que debe instalar el complemento InAppBrowser para que esto funcione:

cordova plugin add cordova-plugin-inappbrowser
freejosh
fuente
3
sí, yo también usé el mismo target = "_ blank" en cordova 1.7.0 pero ahora estoy trabajando con 2.9.0 y me está molestando, tu sugerencia tampoco funcionó ...... :(
ahsan ali
6
sí, también lo intenté y seguí los enlaces que compartiste, gracias por tu ayuda, pero el problema sigue ahí, el sitio todavía se abre en la aplicación ...... :(
ahsan ali
hey ahsan, ¿te importaría explicar cuál fue tu problema? Creo que puedo tener el mismo problema.
quién se llama
3
Recuerde que debe instalar el complemento InAppBrowser para que esto funcione, instrucciones aquí: cordova.apache.org/docs/en/3.0.0/…
jackocnr
7
Tengo el mismo problema ... la solución no funciona :( se abre como un enlace normal (en Android)
Daniel
29

Como se respondió en otras publicaciones, tiene dos opciones diferentes para diferentes plataformas. Lo que hago es:

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    // Mock device.platform property if not available
    if (!window.device) {
        window.device = { platform: 'Browser' };
    }

    handleExternalURLs();
}

function handleExternalURLs() {
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    else {
        // Leave standard behaviour
    }
}

Entonces, como puede ver, estoy verificando la plataforma del dispositivo y, dependiendo de eso, estoy usando un método diferente. En el caso de un navegador estándar, dejo el comportamiento estándar. A partir de ahora, la solución funcionará bien en Android, iOS y en un navegador, mientras que la página HTML no se modificará, por lo que puede tener URL representadas como ancla estándar.

<a href="http://stackoverflow.com">

La solución requiere los complementos InAppBrowser y Device

Krzychu
fuente
Excelente respuesta. En caso de que no sea así para otros, asegúrese de que su www / cordova_plugins.js tenga el dispositivo y las configuraciones inappbrowser incluidas. Cuando instalo complementos, agrega las configuraciones js y complementos a la carpeta de ensayo y no a mi carpeta www de trabajo principal. Una vez que resolví la configuración y las ubicaciones, esto funcionó perfectamente.
Michael Bordash
1
¡Esta es la mejor respuesta! Recuerde que no ha instalado el complemento InAppBrowser a través de:$ meteor add cordova:[email protected]
tixastronauta
Si alguien quisiera contribuir con el fragmento, lo subí a lo esencial. gist.github.com/redolent/e79722b32a48a536b5ba
redolent
28
<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

Funciona para mí con Android y PG 3.0

user2758937
fuente
Parece que todavía me falla en ambos, Android 2.3.7 y 4.2.2.
user569825
2
Funciona para mí en Android 4.4.2 con Cordova 3.3.0. Pero no funciona en iOS 6.1.
mytharcher
Me funciona cordova 3.3.0, gracias, ¿y de dónde sacaste esta información? No se pudo encontrar en la documentación.
Teoman shipahi
Esto funcionó para mí con cordova 3.4.1 y android 4.2. No necesitaba un complemento. Informaré después de probar en iOS7.
pgsandstrom
Esta es la única solución que me funcionó en Android, gracias
Niraj Chauhan
21

Hay 2 formas diferentes de abrir URL en Android y iPhone.

PARA IOS use el siguiente código.

window.open("http://google.com", '_system');

y para el sistema operativo Android use el siguiente código.

navigator.app.loadUrl("http://google.com", {openExternal : true});
Hassan Siddique
fuente
Córdoba también puede usar window.open("http://google.com", '_system'). No debería usarlo navigator.app.loadUrl, porque no funcionará con market://URL: en ese caso, simplemente cerrará su aplicación y se abrirá en la misma ventana ... no siempre es preferible.
Agamemnus
1
Agamemnus, window.open no funciona en Android en mi aplicación phonegap 3.6. Necesito usar la solución en esta respuesta para que funcione.
Moulde
10

Por fin, esta publicación me ayuda en iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Abra el archivo "CDVwebviewDelegate.m" y busque "shouldStartLoadWithRequest", luego agregue este código al comienzo de la función:

if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) {
    [[UIApplication sharedApplication] openURL:[request URL]];
    return NO;
}

Mientras se usa navigator.app.loadUrl("http://google.com", {openExternal : true});para Android está bien.

Vía Córdoba 3.3.0.

mytharcher
fuente
Esto es lo único que funcionó para mí en 3.0.0. ¡¡Gracias!!
Rocklan
En 3.0, debe incluir el complemento InAppBrowser. Por extraño que parezca.
Sean Bannister
Lo cambiaría una capa arriba en MainViewController.m: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) request navigationType: (UIWebViewNavigationType) navigationType {NSURL * url = [request URL]; if ([[esquema de URL] isEqualToString: @ "archivo"] || [[esquema de URL] isEqualToString: @ "gap"]) {return [super webView: theWebView shouldStartLoadWithRequest: request navigationType: navigationType]; } else {[[UIApplication sharedApplication] openURL: url]; devolver NO; }}
Gamadril
10

Ninguna de estas respuestas es lo suficientemente explícita como para que se abran enlaces externos en cada plataforma. Según los documentos de inAppBrowser :

Instalar en pc

cordova plugin add cordova-plugin-inappbrowser

Sobrescribir window.open (opcional, pero recomendado para simplificar)

window.open = cordova.InAppBrowser.open;

Si no sobrescribe window.open, utilizará la window.openfunción nativa y no puede esperar obtener los mismos resultados entre plataformas.

Úselo para abrir enlaces en el navegador predeterminado

window.open(your_href_value, '_system');

Tenga en cuenta que el destino para inAppBrowser (que es para lo que sugiere el nombre del complemento) es '_blank', en lugar de '_system'.


Sin los pasos anteriores, no pude obtener enlaces para abrir en la multiplataforma de la aplicación del navegador predeterminada.

Crédito adicional

A continuación, se muestra un ejemplo de controlador de clics (en vivo) para los enlaces:

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});
bozdoz
fuente
¿Dónde anula exactamente la ventana abierta? En el sitio web o la aplicación cordova
Ellisan
Preferiblemente, la parte superior de su archivo JavaScript que carga en su página index.html (su sitio web, si eso ayuda)
bozdoz
7

Si tiene jQuery cerca, puede interceptar el clic en el enlace de esta manera:

$(document).on('click', 'a', function (event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_system');
    return false;
});

De esta manera no es necesario modificar los enlaces en el html, lo que puede ahorrar mucho tiempo. Lo configuré usando un delegado, por eso lo ve vinculado al objeto del documento, con la etiqueta 'a' como segundo argumento. De esta forma se manejarán todas las etiquetas 'a', independientemente de cuándo se agreguen.

Por supuesto, aún tiene que instalar el complemento InAppBrowser:

cordova plugin add org.apache.cordova.inappbrowser
Michel Reij
fuente
Esta es una buena idea que usaré, pero también debes encargarte de las llamadas directas de window.open (no todo pasa por un enlace)
Sebastien Lorber
3
window.open('http://www.kidzout.com', '_system');

Funcionará, pero solo si tiene instalado el complemento inappbrowser. Para instalar, usando la terminal, busque la carpeta www en su proyecto y escriba:

phonegap plugin add org.apache.cordova.inappbrowser

o

cordova plugin add org.apache.cordova.inappbrowser

Luego, su enlace se abrirá en el navegador.

Dev01
fuente
El comando phonegap local <command>ha sido anulado. El comando se ha delegado en phonegap <command>. phonegap local <command>Pronto se eliminará el comando .
Ajay Suwalka
No lo sé en el pasado, pero hoy en día lo correcto para instalar este complemento es cordova plugin add cordova-plugin-inappbrowser.
Plinio FM
2

Con Cordova 5.0 y versiones posteriores, el complemento InAppBrowser cambia de nombre en el registro de complementos de Cordova, por lo que debe instalarlo usando

cordova plugin add cordova-plugin-inappbrowser --save

Entonces usa

<a href="#" onclick="window.open('http://www.kidzout.com', '_system');">www.kidzout.com</a>

codevision
fuente
1

Estoy usando PhoneGap Build (v3.4.0), con enfoque en iOS, y necesitaba tener esta entrada en mi config.xml para que PhoneGap reconociera el complemento InAppBrowser.

<gap:plugin name="org.apache.cordova.inappbrowser" />

Después de eso, el uso de window.open (url, target) debería funcionar como se esperaba, como se documenta aquí .

contactmatt
fuente
1
Solo estoy m also using PhoneGap Build (v3.5.x) and added the plugin via the config.xml. But what i get is an InAppBrowser without controls an cannot call the safari browser. Iusando window.open (). ¿Algún consejo?
Reinos
Si está configurado correctamente, window.open debería funcionar. En mi situación, window.open está abriendo otra URL del navegador y funciona bien. Asegúrese de que la URL esté bien.
contactmatt
Acabo de probar esto con Phonegap Build y tiene un error con: "plugin unsupported: org.apache.cordova.inappbrowser"
David Ball
1

También enfrenté el problema de que el enlace no se abría en el navegador, aquí está mi solución con los pasos:

1: Instale este complemento de cordova.

cordova plugin add cordova-plugin-inappbrowser

2: agregue el enlace abierto en el html como sigue.

<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>

3: este es el paso más importante debido a esto me enfrenté a muchos problemas: descargue el cordova.jsarchivo y péguelo en la wwwcarpeta. Luego haga una referencia de esto en el index.htmlarchivo.

<script src="cordova.js"></script>

Esta solución funcionará tanto para el entorno Android como para iPhone.

Tabish
fuente
-2

Me gusta esto :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
OussamaChaib
fuente