Blog /Android /Integrando WebView Android Com JavaScript de Uma WebPage

Integrando WebView Android Com JavaScript de Uma WebPage

Vinícius Thiengo
(13823) (18)

Go-ahead

"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."

Peter Skillman

Prototipagem Android

Capa do curso Prototipagem Profissional de Aplicativos

TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim

Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.

Curso Android, gratuito

Lendo

TítuloDomain-driven Design Destilado
CategoriaEngenharia de Software
Autor(es)Vaughn Vernon
EditoraAlta Books
Edição1ª
Ano2024
Páginas160

Opa! Blz?

Nesse vídeo dou continuidade ao vídeo anterior em que falo sobre o WebView, componente visual mutio utilizado para construir APPs Android. Nesse vídeo mostro a integração em termos de envio e recebimento de dados entre a APP que contém a WebView e a página Web que é carregada na WebView.

Note que mesmo que você esteja começando no desenvolvimento Android e já tenha algum conhecimento com desenvolvimento Web, com o componente WebView já é possível você mesmo no inicio construir suas APPs profissionais, pois como eu falei no vídeo, até mesmo grandes empresas da Web utilizam o WebView. Mas enfim, vou evitar mais delongas e deixar você assistir ao vídeo.

Se você não conhece o LogCat do Android, eu fiz um vídeo falando somente dele: Entendendo e Utilizando o a Classe Log Com o LogCat no Android

Se você está iniciando e nunca criou um projeto e nem instalou o Bundle do Android, esse post qe fiz pode ser muito util a você: Iniciando Em Android: Instalação e Configuração do Bundle

O link para download do projeto se encontra logo abaixo no post (incluindo a página HTML/PHP).

Note que utilizei a lib jQuery ao invés de utilizar o JavaScript, mas você pode utilizar o JavaScript puro ou outra lib, não há problemas.

Compartilhe, comente! Vlw

Download

Download do arquivo .zip com os arquivos do vídeo.

Relacionado

ScrollView e HorizontalScrollView no Android, Entendendo e UtilizandoAndroid

GridLayout no Android, Entendendo e UtilizandoAndroid

GridView no Android, Entendendo e UtilizandoAndroid

WebView no Android, Entendendo e UtilizandoAndroid

javascript - android - componentes visuais no android - webview - integração android e web

Comentários Facebook

Comentários Blog (18)

20/08/2019

Olá Thiengo! Parabéns pela vídeo show de bola!! Amigo tive um problema, após fazer a parte de habilitar o javascript, no meu site por exemplo tem essa tela inicial com nome e logomarca que aparece por alguns segundos. Ao gerar o apk nesta parte pra teste, essa tela fica travada pra sempre.. Veja que no navegador abre normal e em seguida vai à tela principal, já no webview não ocorre.. Sabe o que pode ser?

Vinícius Thiengo (0) (0)

24/08/2019

Dani, tudo bem?

Para liberar o JavaScript o código tem que ser similar ao a seguir:

...
WebSettings webSettings = meuWebView.getSettings();
webSettings.setJavaScriptEnabled( true );
...

O seu esta assim?

Se sim e nada da página funcionar como esperado, me informe o que esta sendo apresentado nos logs do Android Studio assim que você executa o app e a página trava.

Abraço.

Alisson Maciel (1) (0)

22/03/2017

Olá meu amigo, eu tenho uma rede social em forma web, desenvolvido com php e mysql, e eu transformei ele em app, pelo app inventor, então utilizo apenas a url pra executar como app. só que quando eu vou ir postar uma imagem pelo app, o popup pra abrir os arquivos não abre. Quando clica no input nada acontece, pode me explicar porque e como pode ser resolvido, pode cobrar se necessário.

Vinícius Thiengo (0) (0)

24/03/2017

Alisson, tudo bem?

Esse problema é antigo, alias, essa limitação. Como desenvolveu o App no App Inventor, pode ser que alguma das soluções do link a seguir funcione para ti:

http://stackoverflow.com/questions/5907369/file-upload-in-webview/7041918#7041918

Aqui no Blog já discuti esse problema, até mesmo crie um artigo completo e com vídeo com uma solução que serve para qualquer versão do Android, digo, ao menos a partir da API 14, já respondendo a mais de 98% dos dispositivos Android no mercado.

Mesmo com o App Invento acredito que é possível que você aplique essa solução caso nenhuma outra do link anterior funcione. Segue artigo: http://www.thiengo.com.br/input-file-no-webview-android

Abraço.

Rafael Miguel (2) (0)

26/10/2016

Boa noite!

Criamos um webview utilizando android, e no site existe um input type="file", porém através do webview o input simplesmente não acessa as pastas do aparelho.
Gostaria de saber o que poderia ser feito para resolver esse problema, e se preciso liberar alguma permissão para isso.

Obrigado!!!

Vinícius Thiengo (0) (0)

28/10/2016

Rafael, blz?

Esse é um problema antigo com o WebView e o input file.

Tem uma sugestão de solução nesse link: http://stackoverflow.com/questions/5907369/file-upload-in-webview/7041918#7041918

Mas uma outra possível solução é você em seu script Web identificar o tamanho da tela do device que está com o site aberto e com base nisso trabalhar a lógica de negócio correta no script JavaScript.

Falo sobre identificar o tamanho da tela para definir se é ou não um device mobile em uso, pois foi a maneira mais segura que encontrei até hoje de definir isso enquanto o site estava em produção. Mas existem alguns scripts JavaScript mais sofisticados por ai, vale a pena buscar mais.

Quando definido que é uma tela de desktop ou laptop, então deixe o input file trabalhar da maneira comum.

Caso contrário, definido que é um device mobile, utilize a comunicação via Interface com o código Android, digo, JavaScript e Android.

Nesse artigo / vídeo mostro como fazer isso: http://www.thiengo.com.br/integrando-webview-android-com-javascript-de-uma-webpage

Porém ele está sendo explicado em um projeto muito fictício, tenho um projeto mais atual e real utilizando WebView Interface nesse artigo / vídeo: http://www.thiengo.com.br/checkout-transparente-da-web-no-android

Essa comunicação será ativada somente com o clique no input file, ou seja, você terá de remover o comportamento padrão desse button. Com jQuery isso é trivial.

Clicado no input file, chame o código JavaScript para ativar um método Android para então ativar o file chooser do device.

Uma library que pode lhe ajudar a ativar o file chooser é a seguinte: https://android-arsenal.com/details/1/4044

Feito isso, ainda tem a parte do envio do formulário com a mídia. Essa mídia escolhida deverá ser enviada também pelo Android, então o melhor caminho que vejo é manter a conexão JavaScript x Android via Interface e assim enviar todos os outros dados de texto do formulário para o Android e o código Android, junto a uma library como o Retrofit, enviar todos os dados para seu backend Web.

Caso não conheça o Retrofit, veja esse artigo / vídeo (e os links indicados): http://www.thiengo.com.br/library-retrofit-2-no-android

Siga as dicas e veja se consegue fazer funcionar sem problemas.

Note que você pode ter problemas quando o usuário estiver em um sistema mobile diferente do Android.

Nesse caso tente esse script jQuery: http://stackoverflow.com/a/6031480/2578331

A princípio ele detecta devices Android, logo é melhor que a minha técnica de tamanho de tela.

Abraço.

Francisco Pereira (1) (0)

04/06/2015

Olá, como vai?Primeiramente parabéns pelo vídeo, adoro seu trabalho.Diga-me é possível desabilitar ou alterar o botão IR do teclado do telefone? Porque quando preencho o campo nome e se eu clicar no botão ir do teclado do telefone ele envia os dados, quero que ele pule pro próximo campo a ser preenchido.

Vinícius Thiengo (0) (0)

05/06/2015

Fala Francisco, td tranquilo.
Dê uma olhada a resposta certa desse link (http://stackoverflow.com/questions/5677563/listener-for-done-button-on-edittext ). Verifique se quando vc retorna false se ele não faz nada. Vc consegue dentro desse listener mudar o focus de um campo para outro. Ve se consegue ai, qualquer coisa volte ae. Abraço

Francisco Pereira (1) (0)

05/06/2015

Olá Thiengo, obrigado pela atenção, mas não deu certo.Esqueci de informar que é na webView a página que estou carregando tem um formulário, campo nome, email, observção, eu quero que campo estiver no campo nome e clicar no botão ir do teclado o focu mudará pro próximo campo.Estou usando o viewWeb.setOnKeyListener () para identificar o back, tentei usa-lo para identificar a ação da tecla ir, coloquei um breakPoint ele nem reconhce , somente do back.

Vinícius Thiengo (1) (0)

06/06/2015

Fala Francisco, blz?
Encontrei esse link (http://stackoverflow.com/questions/14682193/hide-or-disable-webview-softkeyboard-go-done-enter-button ). Nele o problema do camarada é o mesmo que o seu, mesmo o post sendo um pouco antigo (2013) aparentemente nada mudou em relação a essa limitação. Ele tb tentou de todas as formas capturar o clique no "Go" button para evitar o envio, porém sem sucesso (o camarada da segunda resposta a pergunta conseguiu fazer isso). Mas ele c=achou uma solução, no caso remover o "Go" button, no form que está no WebView ele colocou um TextArea com rows="1" para simular um input type="text", dessa forma o "Go" button não aparece, pois segundo a resposta esse button aparece somente com inputs. Teste ai e ve se roda para ti. Abraço

Francisco Pereira (2) (0)

08/06/2015

Obrigado Thiengo, a solução é boa, mas no meu caso eu só faço o load do site, não monto o html.

Nilsinho Pessim (1) (0)

17/09/2014

Olá Thiengo, estou com um pequeno problema, quando o Aplicativo abre, em vez de carregar na WebView, o blog está sendo carregado no navegador...

peguei o link de uma categoria do blog, e coloquei como pagina de load no app, até ae abriu beleza, porem na hora q eu clico no menu pra mudar de categoria, ele carrega no navegador em vez de ser dentro da WebView... me dê uma luz, já estou a muito tempo atras disso e nda. VLW

Vinícius Thiengo (1) (0)

17/09/2014

Fala Nilsinho, blz?
Problema comum, quando fiz o vídeo não sabiia que isso poderia acontecer, a solução segue abaixo:

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl(webData.getUrl());
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon){}
@Override
public void onPageFinished(WebView view, String url){}
});

A jogada mesmo está no método setWebViewClient(). Abraço

Nilsinho Pessim (2) (0)

18/09/2014

Valeu mesmo pela atenção, pelo incrível que pareça eu consegui fazer funcionar, encontrei um campo falando sobre isso mesmo, olha como eu coloquei (desse jeito funcionou 100%):

public class MainActivity extends Activity {

private String url = "http://blog.nilsinho.com ";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView wv = (WebView) findViewById(R.id.webView);
        WebSettings ws = wv.getSettings();
        ws.setJavaScriptEnabled(true);
        wv.loadUrl(url);
        wv.setWebViewClient(new WebViewClient());
        return;

    }
}

agora o próximo passo é criar um menu bacaninha pra aplicação. Obrigado! =)

Luciano Castilho (1) (0)

18/02/2014

Boa tarde Thiengo,

Assisti as suas video aulas e gostei bastante, tem me ajudado muito.
Agora tenho uma dúvida sobre como usar ajax no webview, a fim de evitar reload no app, será que tem como fazer isso?!
Fiz diversos testes, e no html funciona direitinho, no ambiente do eclipse também, agora qdo vou usar o telefone, ele só fas o beforeSend do ajax e nada mais, pode me ajudar?

muito obrigado

Vinícius Thiengo (0) (0)

18/02/2014

Fala Luciano... comportamento estranho, vc está acompanhando o LogCat quando está utilizando no ambiente que dar certo (eclipse e cia.) e no ambiente que da errado (smartphone)? Tentou algum outro smartphone? Acho que se seu problema é reload o atributo "configChanges" da tag <activity> pode lhe ajudar. Quando trabalho com WebView costumo utilizar esse atributo para evitar a reconstrução da Activity quando o usuário muda a orientação do dispositivo (landscap para portrait e vice-versa) ou quando chama o teclado fisico do dispositivo. Luciano vc está sobrescrevendo o método public boolean shouldOverrideUrlLoading(WebView view, String url) de WebViewClient()? Pode ser isso tb... aqui no blog fiz um vídeo mostrando como utilizar o atributo configChanges, é só colocar no buscador do site que ele será o primeiro resultado. Se quiser dar uma destrinchada melhor envie o projeto por email para eu poder dar uma olhada nessa parte, mas aconselho vc tentar rodar em outro dispositivo smartphone para ter certeza tb que isso não uma limitação de seu smartphone... Abraço e sucesso ai com sua App

Luciano (1) (0)

19/02/2014

Thiengo,
Primeiramente muito obrigado pela sua atenção no meu caso, essas alterações no configChanges, e o override nos metodos estava fazendo, mas nada disso estava inferferindo, na verdade era a versão do jquery que estava referenciando no html, quando coloquei a mais atual funcionou, o ajax funcionou direitinho ao menos no meu Motorola de teste. Vou assistir os videos sugeridos por você, e gostaria de parabenizar você por eles, são muito bons realmente.
[]'s Luciano Castilho

Vinícius Thiengo (0) (0)

19/02/2014

Vlw Luciano, abraço