link para abrir o phonegap no navegador


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

Ei especialistas, estou usando o phonegap 2.9.0 e estou usando o código acima para abrir o link no navegador, mas ele abre no mesmo aplicativo ...... como abri-lo no navegador safari?

ele abre o site no mesmo aplicativo e, em seguida, não consigo voltar ao aplicativo, então preciso excluir o aplicativo e instalá-lo novamente ...


Se você deseja abrir _blankpara navegador externo e _selfWebView, verifique minha solução 2015 para Cordova 5.1.1: stackoverflow.com/a/32227524/82609
Sebastien Lorber

Veja também as respostas em uma pergunta semelhante: stackoverflow.com/a/26176013/1480587 e stackoverflow.com/a/46619378/1480587
Peter T.

Respostas:


225

Conforme sugerido em uma pergunta semelhante , use JavaScript para chamar window.opencom o targetargumento definido _systemcomo, de acordo com a documentação do InAppBrowser :

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

Isso deve funcionar, embora uma solução melhor e mais flexível seja interceptar os clickeventos de todos os links e chamar window.opencom argumentos lidos dos atributos do link.

Lembre-se de que você deve instalar o plug-in InAppBrowser para que isso funcione:

cordova plugin add cordova-plugin-inappbrowser

3
sim, eu também usei o mesmo target = "_ blank" no cordova 1.7.0 mas agora estou trabalhando com 2.9.0 e isso está me incomodando, sua sujjestion também não funcionou ...... :(
ahsan ali

6
sim, eu tentei também e segui os links que você compartilhou, obrigado pela sua ajuda, mas o problema ainda está lá, o site ainda está abrindo no app ...... :(
ahsan ali

ei ahsan, você se importaria de explicar qual era o seu problema? Acho que posso estar com o mesmo problema.
apelido de

3
Lembre-se de que você deve instalar o plug-in InAppBrowser para que isso funcione, instruções aqui: cordova.apache.org/docs/en/3.0.0/…
jackocnr

7
Eu tenho o mesmo problema .. a solução não está funcionando :( abre apenas como um link normal (no Android)
Daniel

29

Conforme respondido em outras postagens, você tem duas opções diferentes para plataformas diferentes. O que eu faço é:

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
    }
}

Como você pode ver, estou verificando a plataforma do dispositivo e, dependendo disso, estou usando um método diferente. No caso de um navegador padrão, deixo o comportamento padrão. A partir de agora a solução funcionará bem no Android, iOS e em um navegador, enquanto a página HTML não será alterada, para que possa ter URLs representados como âncora padrão

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

A solução requer os plug-ins InAppBrowser e Device


Excelente resposta. Caso isso não aconteça para outros, certifique-se de que seu www / cordova_plugins.js tenha as configurações do dispositivo e do inappbrowser incluídas. Quando eu instalo plug-ins, ele adiciona as configurações js e plug-ins à pasta de teste e não à minha pasta principal de trabalho www. Depois de organizar a configuração e os locais, funcionou perfeitamente.
Michael Bordash

1
Esta é a melhor resposta! Lembre-se de que você não instalou o plugin InAppBrowser via:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4
tixastronauta

Se alguém quiser contribuir com o snippet, eu o carreguei no gist. gist.github.com/redolent/e79722b32a48a536b5ba
redolent

28
<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

Funciona para mim com Android e PG 3.0


Parece ainda falhar para mim em ambos, Android 2.3.7 e 4.2.2.
user569825

2
Funciona para mim no Android 4.4.2 com Cordova 3.3.0. Mas não funciona no iOS 6.1.
mytharcher

Funciona para mim cordova 3.3.0, obrigado, e de onde você conseguiu essa informação? Não foi possível encontrar na documentação.
Teoman shipahi

Isso funcionou para mim com Cordova 3.4.1 e Android 4.2. Eu não precisava de um plugin. Apresentarei um relatório após o teste no iOS7.
pgsandstrom

Esta é a única solução que funcionou para mim no Android, obrigado
Niraj Chauhan

21

Existem 2 maneiras diferentes de abrir URL no Android e no iphone.

PARA IOS use o seguinte código.

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

e para o sistema operacional Android, use o seguinte código.

navigator.app.loadUrl("http://google.com", {openExternal : true});

Cordova também pode usar window.open("http://google.com", '_system'). Não deve usar navigator.app.loadUrl, porque não funcionará com market://URLs: nesse caso, apenas fechará seu aplicativo e abrirá na mesma janela .. nem sempre preferível.
Agamemnus

1
Agamemnus, window.open não está funcionando no Android em meu aplicativo phonegap 3.6. Preciso usar a solução nesta resposta para fazer funcionar.
Moulde

10

Enfim este post me ajuda no iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/ .

Abra o arquivo "CDVwebviewDelegate.m" e pesquise "shouldStartLoadWithRequest" e adicione este código ao início da função:

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

Durante o uso navigator.app.loadUrl("http://google.com", {openExternal : true});para Android está OK.

Via Cordova 3.3.0.


Esta é a única coisa que funcionou para mim no 3.0.0. Obrigado!!
Rocklan

No 3.0, você precisa incluir o plugin InAppBrowser. Por mais estranho que possa parecer.
Sean Bannister,

Eu mudaria uma camada acima em MainViewController.m: - (BOOL) webView: (UIWebView *) theWebView shouldStartLoadWithRequest: (NSURLRequest *) request navigationType: (UIWebViewNavigationType) navigationType {NSURL * url = [URL de solicitação]; if ([[esquema de url] isEqualToString: @ "file"] || [[esquema de url] isEqualToString: @ "gap"]) {return [super webView: theWebView shouldStartLoadWithRequest: request navigationType: navigationType]; } else {[[UIApplication sharedApplication] openURL: url]; return NO; }}
Gamadril

10

Nenhuma dessas respostas é explícita o suficiente para que links externos sejam abertos em cada plataforma. De acordo com os documentos do inAppBrowser :

Instalar

cordova plugin add cordova-plugin-inappbrowser

Overwrite window.open (opcional, mas recomendado para simplificar)

window.open = cordova.InAppBrowser.open;

Se você não substituir window.open, estará usando a window.openfunção nativa e não pode esperar obter os mesmos resultados em várias plataformas.

Use-o para abrir links no navegador padrão

window.open(your_href_value, '_system');

Observe que o destino para o inAppBrowser (que é o que o nome do plug-in sugere que deve ser usado) é '_blank', em vez de '_system'.


Sem as etapas acima, não consegui obter links para abrir no aplicativo de navegador padrão de plataforma cruzada.

Crédito extra

Aqui está um exemplo de manipulador de cliques (ao vivo) para os links:

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});

Onde exatamente você substitui o window.open? No site ou no app cordova
Ellisan

De preferência, a parte superior do arquivo JavaScript que você carrega na página index.html (seu site, se isso ajudar)
bozdoz

7

Se acontecer de você ter o jQuery por perto, você pode interceptar o clique no link desta forma:

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

Desta forma, você não precisa modificar os links no html, o que pode economizar muito tempo. Eu configurei isso usando um delegado, é por isso que você o vê sendo vinculado ao objeto de documento, com a tag 'a' como o segundo argumento. Desta forma, todas as tags 'a' serão tratadas, independentemente de quando forem adicionadas.

Claro, você ainda precisa instalar o plug-in InAppBrowser:

cordova plugin add org.apache.cordova.inappbrowser

esta é uma boa ideia que vou usar, mas você também deve cuidar das chamadas directas de window.open (nem tudo passa por um link)
Sebastien Lorber

3
window.open('http://www.kidzout.com', '_system');

Funcionará, mas apenas se você tiver o plugin inappbrowser instalado. Para instalar, usando o terminal, navegue até a pasta www em seu projeto e digite:

phonegap plugin add org.apache.cordova.inappbrowser

ou

cordova plugin add org.apache.cordova.inappbrowser

Em seguida, seu link será aberto no navegador.


O comando phonegap local <command>foi DESCONTINUADO. O comando foi delegado a phonegap <command>. O comando phonegap local <command>será removido em breve.
Ajay Suwalka de

Não sei no passado, mas hoje em dia o correto para instalar esse plugin é cordova plugin add cordova-plugin-inappbrowser.
Plinio FM

2

Com Cordova 5.0 e superior, o plugin InAppBrowser é renomeado no registro do plugin Cordova, então você deve instalá-lo usando

cordova plugin add cordova-plugin-inappbrowser --save

Então use

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


1

Estou usando o PhoneGap Build (v3.4.0), com foco no iOS, e precisava ter essa entrada em meu config.xml para PhoneGap reconhecer o plug-in InAppBrowser.

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

Depois disso, o uso de window.open (url, target) deve funcionar como esperado, conforme documentado aqui .


1
Estou 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. Iapenas usando o window.open (). Algum conselho?
Reinos

Se estiver configurado corretamente, window.open deve funcionar. Na minha situação, window.open está abrindo outro URL do navegador e funciona bem. Verifique se o URL está correto.
contactmatt de

Acabei de tentar fazer isso com o Phonegap Build e está apresentando um erro: "plugin não suportado: org.apache.cordova.inappbrowser"
David Ball

1

Também enfrentei o problema de que o link não estava abrindo no navegador. Aqui está minha solução com as etapas:

1: Instale este plugin Cordova.

cordova plugin add cordova-plugin-inappbrowser

2: adicione o link aberto no html como segue.

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

3: este é o passo mais importante devido a isso eu enfrentei muitos problemas: baixe o cordova.jsarquivo e cole na wwwpasta. Em seguida, faça uma referência disso no index.htmlarquivo.

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

Esta solução funcionará tanto para o ambiente android quanto para o iPhone.


-2

Como isso :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.