javascript - validacion - validar formulario jquery
¿Es posible obtener datos de formularios HTML en Android mientras usa webView? (8)
@Shariq Como muchos ya han respondido a esta pregunta de una buena manera, pero creo que, además, necesita una aclaración acerca de cómo exactamente los datos fluyen en los códigos de webview a andorid, así que no desperdiciaré los bytes por escrito que todos los códigos redundantes:
(Estoy tomando la referencia de sus códigos para una mejor comprensión) Siga estos pasos en estos códigos para comprender mejor:
Paso 1:
Necesitamos definir algún método en el lado de Android que pueda aceptar algunos datos de webview
@JavascriptInterface
//this ''formData'' variable is going to accept the data from webview
public void processHTML(String formData) {
Log.d("AWESOME_TAG", "form data: " + formData);
}
Ahora el valor estará disponible para el contexto de Android de Java.
Paso 2:
Aquí están sus códigos secundarios HTML (webview). Si la URL a la que está accediendo en webview es suya, puede escribir fácilmente estos códigos en la página html, pero si está accediendo a alguna URL de terceros, aún puede inyectar este código js en webview simplemente mediante la siguiente línea de código:
...
//partial code
webView.load("javascript:function myFunction() { var x = document.getElementById(''thebox'').value; Android.processHTML(x); } myFunction();";
...
Entonces, ¿qué está pasando aquí exactamente?
''x'' es la variable en js que tiene el valor requerido y luego estamos enviando esta variable ''x'' al contexto de Android a través del método call Android.processHTML (x)
Espero que te pueda ayudar de una mejor manera.
Estoy haciendo un formulario muy simple en HTML que se ve en Android usando la vista web que toma su nombre usando un cuadro de texto y cuando hace clic en el botón, lo muestra en un párrafo y se hace usando tanto html como javascript. Este es mi código html:
<!DOCTYPE html>
<html>
<body>
<p> Write your name and win your favorite game console name and win it! The winners will be announced in 4 days.</p>
Type your name here: <input id="thebox" type="text" name="value" value=""><br>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("thebox").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Formulario nuevo editado
<form name="albert" action="" method="POST">
<label for="firstname"> First Name </label>
<br /><br />
<input type="text" name="firstname" id="firstname" />
<input type="submit" name="sbumit" value="Submit" />
</form>
Quiero obtener el valor del cuadro de entrada llamado "thebox" en una variable en android en el botón de clic y probé muchas cosas antes y seguí un método en el que se inyecta un archivo JS, pero como no sé nada sobre JS, Fallé al intentarlo y aquí está el archivo que puse en mi proyecto y el archivo se llama inyect.js:
document.getElementsByTagName(''form'')[0].onsubmit = function () {
var objPWD, objAccount, objSave;
var str = '''';
var inputs = document.getElementsByTagName(''thebox'');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].name.toLowerCase() === ''thebox'') {
objAccount = inputs[i];
}
}
if(objAccount != null) {
str += objAccount.value;
}
if(objPWD != null) {
str += '' , '' + objPWD.value;
}
if(objSave != null) {
str += '' , '' + objSave.value;
}
window.AndroidInterface.processHTML(str);
return true;
};
Y luego, cuando seguí ese artículo, dije que necesitaba poner algunas cosas en mi MainActivity, pero como por primera vez utilizaba webview, no podía entender mucho y aquí está el código que puse en mi MainActivity:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = new WebView(this);
this.setContentView(webView);
// enable javascript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JavaScriptInterface(), "AndroidInterface");
// catch events
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
try {
view.loadUrl("javascript:" + buildInjection());
} catch (IOException e) {
e.printStackTrace();
}
}
});
webView.loadUrl("http://someurl.com");
}
Una clase anidada que hice en mi MainActivity:
class JavaScriptInterface {
@JavascriptInterface
public void processHTML(String formData) {
Log.d("AWESOME_TAG", "form data: " + formData);
}
}
Y finalmente el método que inyecta el código:
private String buildInjection() throws IOException {
StringBuilder buf = new StringBuilder();
InputStream inject = getAssets().open("inject.js");// file from assets
BufferedReader in = new BufferedReader(new InputStreamReader(inject, "UTF-8"));
String str;
while ((str = in.readLine()) != null) {
buf.append(str);
}
in.close();
return buf.toString();
}
Quiero obtener el valor del formulario html (el cuadro de entrada) que muestro en una vista web en Android y es realmente posible hacerlo y, en caso afirmativo, ¿cómo y por favor explique? Gracias y también indiquen en qué variable obtendré el valor.
Los mejores js para inyectar han utilizado hasta ahora, recopila datos de todos los formularios en el envío
document.getElementsByTagName("form")[0].addEventListener("submit", myFunction);
function myFunction()
{
var data="";
var inputs = document.forms[0].getElementsByTagName(''input'');
for (var i = 0; i < inputs.length; i++) {
var field = inputs[i];
if (field.type != ''submit'' && field.type != ''reset'' && field.type != ''button'')
data += '''' + field.name + ''='' + field.value+''/n'';
}
window.AndroidInterface.processHTML(data);
return true;
}
Para comunicar una vista web con Android nativo, esta es una forma simple: en su js onHaga clic en el botón que debe llamar a la URL que contiene su texto, algo como myPrefix: // myData y en Android
webView.setWebViewClient(new WebViewClient()
{
@Override
public boolean shouldOverrideUrlLoading(final WebView view, final String url)
{
if(url.startsWith("myPrefix://"))
{
//get your data by split url
return true;
}
return false;
});
Para los formularios con el método "GET", puede lograr esto de manera bastante simple simplemente anulando el método shouldOverrideUrlLoading . La siguiente solución funciona solo si la URL se cargó mediante el método webview.loadUrl() .
private class MWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// submit will end-up with url like "data:,?firstname=SomeInput&sbumit=Submit"
if (URLUtil.isDataUrl(url)) {
url = url.replace(":,?", ":/?"); //to be able to properly parse Uri
Uri uri = Uri.parse(url);
//here you can get params by field name
String firstname = uri.getQueryParameter("firstname");
//we handle this URL ourselves
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
Puede obtener datos de WebView capturando mensajes de alerta.
Utilice WebChromeClient.
mWebview = (WebView)findViewById(R.id.yourwebviewlayout);
final class YourWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Toast.makeText(getApplicationContext(),
"alert message = " + message,
Toast.LENGTH_SHORT).show();
result.confirm();
return true;
}
}
mWebview.setWebChromeClient(new YourWebChromeClient());
Sí, es posible. Por favor, intente usar el siguiente código
> @Override
> public void onCreate(Bundle savedInstanceState) {
> super.onCreate(savedInstanceState);
> setContentView(R.layout.web_view_layout);
> WebView webView = (WebView) findViewById(R.id.webView);
> webView.getSettings().setPluginState(WebSettings.PluginState.ON);
> WebSettings webSettings = webView.getSettings();
> webSettings.setJavaScriptEnabled(true);
> try {
> progressDialog = new ProgressDialog(ActivityName);
> progressDialog.setMessage("Loading.."); progressDialog.setCancelable(false);
> webView.setWebViewClient(new MyWebViewClient());
> webView.loadUrl(YOUR_URL);
> } catch (Exception e) {
> e.toString();
> }
> }
>
> private class MyWebViewClient extends WebViewClient {
>
> @Override
> public boolean shouldOverrideUrlLoading(WebView view, String url) {
> view.loadUrl(url);
> progressDialog.dismissProgress();
> return true;
> }
>
> @Override
> public void onPageFinished(WebView view, String url) {
> progressDialog.dismissProgress();
> }
> }
Sí, puedes usar javascript para obtener el contenido de la página web. Luego use la vista web jsInterface para devolver el contenido a su código java.
Consulte este proyecto github . Y esta answer y este article .
final Context myApp = this;
/* An instance of this class will be registered as a JavaScript interface */
class MyJavaScriptInterface
{
@JavascriptInterface
@SuppressWarnings("unused")
public void processHTML(String html)
{
// process the html as needed by the app
}
}
final WebView browser = (WebView)findViewById(R.id.browser);
/* JavaScript must be enabled if you want it to work, obviously */
browser.getSettings().setJavaScriptEnabled(true);
/* Register a new JavaScript interface called HTMLOUT */
browser.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");
/* WebViewClient must be set BEFORE calling loadUrl! */
browser.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url)
{
/* This call inject JavaScript into the page which just finished loading. */
browser.loadUrl("javascript:window.HTMLOUT.processHTML(''<head>''+document.getElementsByTagName(''html'')[0].innerHTML+''</head>'');");
}
});
/* load a web page */
browser.loadUrl("http://lexandera.com/files/jsexamples/gethtml.html");
Espero que esto ayude.
Webview browser=(WebView)view.findViewById(R.id.webChart);
browser.getSettings().setJavaScriptEnabled(true);
browser.addJavascriptInterface(new WebAppInterface(getActivity()), "Android");
browser.loadUrl("file:///android_asset/yourHtmlFileName.html");
añadir esta clase de interfaz, WebAppInterface
public class WebAppInterface {
Context mContext;
String data;
WebAppInterface(Context ctx){
this.mContext=ctx;
}
@JavascriptInterface
public void sendData(String data) {
//Get the string value to process
this.data=data;
}
}
sus datos de código HTML
function loadChartData() {
var x = document.getElementById("thebox").value;
Android.sendData(x);
}
llame a esta función cuando el botón html haga clic en Android Webview
ACTUALIZAR
1) Por defecto, javascript está deshabilitado en webview. para habilitarlo, obtenga la configuración de la vista web y llame a setJavaScriptEnabled (true); a la verdad
2) para crear la interfaz entre su código Javascript y su código de Android, debe crear una clase de interfaz Javacript.
3) vincule la interfaz entre su código javascript y el código de Android, debe pasar la referencia de la clase de interfaz y un nombre de interfaz al que su javaScript puede llamar para acceder a la clase.
4) pase la ruta del archivo html para cargar en la vista web (navegador).
5) crear la clase de interfaz como abajo (WebAppInterface).
vea este enlace para obtener más detalles https://developer.android.com/guide/webapps/webview.html
6) en el archivo HTML, cree el botón y agregue el detector de clics a ese botón y llame a la función sendData ("su valor") con el nombre de la interfaz (Aquí Android).
Eso es todo. puede pasar el valor de html a su código de Android.