cordova - poner - PhoneGap: abre el enlace externo en el navegador predeterminado(fuera de la aplicación)
navegador de internet predeterminado de ubuntu (14)
Estoy intentando abrir enlaces en Safari (en un iPhone) desde una aplicación PhoneGap. Estoy usando PhoneGap versión 3.1.0 y uso PhoneGap Build para construir la aplicación.
Tengo dos enlaces en la página (que se muestran a continuación en www / index.html). Ambos enlaces se abren dentro de la aplicación PhoneGap. Puedo ver que PhoneGap está cargado correctamente, porque alerta (''¡dispositivo listo!''); se dispara.
¿Qué debo cambiar para abrir los enlaces en el navegador predeterminado (fuera de la aplicación)?
El archivo www / config.xml se ve así:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
<name>AppName</name>
<description>description</description>
<author href="http://www.example.com/" email="[email protected]">
Company
</author>
<preference name="phonegap-version" value="3.1.0" />
<preference name="orientation" value="portrait" />
<preference name="stay-in-webview" value="false" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.3" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.2" />
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<access origin="*" />
</widget>
El archivo www / index.html se ve así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Test application</title>
</head>
<body>
<a href="#" onclick="openUrl(''http://www.google.com/''); return false;">Link test 1</a>
<a href="#" onclick="window.open(''http://www.google.com/'', ''_system'', ''location=yes''); return false;">Test link 2</a>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function openUrl(url) {
alert("open url: " + url);
window.open(url, ''_blank'', ''location=yes'');
}
function onDeviceReady() {
alert(''device ready!'');
}
$(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</body>
</html>
Aquí está la estructura del proyecto:
├── platforms
├── plugins
│ └── org.apache.cordova.inappbrowser
│ ├── LICENSE
│ ├── package.json
│ ├── plugin.xml
│ ├── README.md
│ ├── RELEASENOTES.md
│ ├── src
│ │ ├── android
│ │ │ ├── InAppBrowser.java
│ │ │ └── InAppChromeClient.java
│ │ ├── blackberry10
│ │ │ └── README.md
│ │ ├── ios
│ │ │ ├── CDVInAppBrowser.h
│ │ │ └── CDVInAppBrowser.m
│ │ └── wp
│ │ └── InAppBrowser.cs
│ └── www
│ ├── InAppBrowser.js
│ └── windows8
│ └── InAppBrowserProxy.js
├── README.md
└── www
├── config.xml
├── cordova.js
├── index.html
├── js
│ └── jquery-1.9.1.js
└── phonegap.js
¿Qué tal esto?
<a href="#" onclick="window.open(encodeURI(''http://www.google.com/''), ''_system'')">Test link 2</a>
EDITAR:
Esto puede corresponder: ¿Cómo llamar a múltiples funciones de JavaScript en un evento onclick?
Estaba pensando, ¿qué tal esto?
Agregar al código:
$(".navLink").on(''tap'', function (e) {
//Prevents Default Behavior
e.preventDefault();
// Calls Your Function with the URL from the custom data attribute
openUrl($(this).data(''url''), ''_system'');
});
entonces:
<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>
Así es como hice que los míos trabajaran.
- En config.xml (phonegap), agregue
<gap:plugin name="org.apache.cordova.inappbrowser" /> - Mi opinión es la siguiente:
<a onclick=''window.open("http://link.com","_system", "location=yes")'' href=''javascript:void(0)'' >link</a> - Muy importante, lo que me faltaba desde el principio, agrega el script cordova en tu encabezado:
<script src="cordova.js"></script>No sé por qué, pero para mí sin él no funciona .
Espero que eso ayude
Así es como lo resolví en Cordova / Phonegap 3.6.3
Instala el complemento inappbroswer cordova:
cordova plugin add org.apache.cordova.inappbrowser
Quería mantener mi aplicación de facsímil lo más similar posible a una página web estándar: quería que teniendo target = "_ blank" en un enlace, se abriría en una página externa.
Así es como lo implementé:
$("a[target=''_blank'']").click(function(e){
e.preventDefault();
window.open($(e.currentTarget).attr(''href''), ''_system'', '''');
});
así que todo lo que tengo que hacer es usar un enlace como el siguiente
<a href="http://www.example.com" target="_blank">Link</a>
Debe usar la brecha: etiqueta del complemento y la identificación completa en su config.xml para instalar complementos:
<gap:plugin name="org.apache.cordova.inappbrowser" />
Como se documenta here .
En caso de que intente abrir el enlace en un navegador web externo, intente usar class = "external" para la etiqueta Anchor.
<a class="external" href="www.google.com" >Link</a>
¡Espero que esto ayude!
Estoy usando cordova 6.0, aquí está mi solución:
1: Instalar este complemento 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 un montón de problemas: descargue el archivo cordova.js y péguelo en la carpeta www . Luego haz una referencia de esto en el archivo index.html .
<script src="cordova.js"></script>
Esta solución funcionará tanto para el medio ambiente, Android y iPhone.
He adaptado la respuesta de pastullo para trabajar también en una aplicación web que podría abrirse en un IndappBrowser cordova, pero también en una aplicación web simple (por ejemplo, para pruebas):
function initOpenURLExternally() {
$("a[target=''_blank''],a[target=''_system'']").each(function (i) {
var $this = $(this);
var href = $this.attr(''href'');
if (href !== "#") {
$this
.attr("onclick", "openURLExternally(/"" + href + "/"); return false;")
.attr("href", "#");
}
});
}
function openURLExternally(url) {
// if cordova is bundeled with the app (remote injection plugin)
log.trace("openURLExternally: ", url);
if (typeof cordova === "object") {
log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
if (typeof cordova.InAppBrowser === "object") {
log.trace("InAppBrowser exists");
cordova.InAppBrowser.open(url, "_system");
return;
}
}
// fallback if no cordova is around us:
//window.open(url, ''_system'', '''');
window.open(url, ''_blank'', '''');
}
Para aquellos que no lo detectaron en la pregunta original, también deben asegurarse de que la URL que intentan abrir no se incluya en la lista blanca agregando una etiqueta de acceso a su config.xml de la siguiente manera:
<access origin="http://www.example.com" />
o puedes hacer
<access origin="*" />
para permitir cualquier cosa
Para iOs, en su MainViewController.m haga lo siguiente
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
{
if ([[UIApplication sharedApplication] canOpenURL:url]) {
[[UIApplication sharedApplication] openURL:url];
return NO;
}
}
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
EDITAR: para Android, en CordovaWebViewClient.java, en shouldOverrideUrlLoading haz lo siguiente:
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(/*check if not external link*) {
view.loadUrl(url);
} else {
//prepend http:// or https:// if needed
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(i);
}
return true;
}
Puede ser que tenga un problema de variable de entorno PATH, pruebe este enlace, puede ser de ayuda.
Tuve el mismo problema que usted y la solución fue incluir el archivo phonegap.js en <head> en todas las páginas donde usaré el InAppBrowser.
¡Todo tu código está bien! Lo único que necesita agregar es: <script src="phonegap.js"></script> en la sección <head> de su index.html
Esto es un poco raro porque Phonegap en su sección de documentación de complementos dice:
"Si un complemento utiliza el elemento
js-modulepara dirigir cordova a cargar los javascripts del complemento, entonces no será necesario que haya referencias de<script>para cargar un complemento. Este es el caso de los complementos core cordova "
Y InAppBrowser es un complemento core cordova. Pero por alguna extraña razón, no funcione hasta que lo incluya en el archivo phonegap.js (al menos en la versión 0.3.3).
NOTA : Encontré un error. Algunas personas dicen que debes incluir 3 archivos: phonegap.js , cordova.js y cordova_plugins.js . Pero cuando incluyo estos 3 archivos, mi aplicación funciona bien en iOS 7, pero en iOS 6 ignora el uso del complemento (Utilizando: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).
Puedes ver más en mi pregunta SO .
¡Espero que esto le pueda ayudar!
edite config.xml Agregue source = "npm" en la entrada de plugin. ''<'' gap: plugin name = "org.apache.cordova.inappbrowser" source = "npm"> ''
prueba con este ejemplo a continuación.
<a class="appopen" onClick="OpenLink();">Sign in</a>
<script>
function OpenLink(){
window.open("http://www.google.com/", "_system");
}
</script>
agregue esta línea Abajo en config.xml si está usando PhoneGap Versión 3.1 o superior
<gap:plugin name="org.apache.cordova.inappbrowser" />
This funcionó perfectamente para mí en iOS.
Como se menciona en el enlace de arriba:
1- Instala el complemento usando el comando:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
2- Y en el archivo HTML, use uno de los siguientes según sea necesario:
window.open(‘http://example.com’, ‘_system’); Loads in the system browser
window.open(‘http://example.com’, ‘_blank’); Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view