[Tutorial] WebView und JavaScript

  • Antworten:5
  • OffenStickyNicht beantwortet
Ludy
  • Mod
  • Blogger
  • Forum-Beiträge: 6.647

28.12.2013 15:06:58 via Website

Hallo,
da häufig das Problem auftaucht wie man JavaScript im WebView benutzt heute mal ein Tutorial.
Das Beispiel dreht sich um eine Login-Webseite.

PHP-Script:

login.php
1<html>
2 <head>
3 <title>Login</title>
4 </head>
5 <body>
6 <?php if(!$_POST) { ?>
7 <form action="" method="post" name="loginForm">
8 <input type="text" name="usernameName" id="usernameId" />Username<br />
9 <input type="password" name="passwordName" id="passwordId" />Password<br />
10 <input type="radio" name="gender" id="gendermann" value="Mann" />Mann<br />
11 <input type="radio" name="gender" id="genderfrau" value="Frau" />Frau<br />
12 <input type="checkbox" name="rememberName" id="rememberId" value="yes"/>Erinner dich an mich!<br />
13 <input type="submit" value="Login" />
14 </form>
15 <?php } else { ?>
16 <h1>Logged</h1>
17 <?php echo "Username: " . $_POST['usernameName']; ?><br />
18 <?php echo "Geschlecht: " . $_POST['gender']; ?><br />
19 <?php echo "Remember: " . $_POST['rememberName']; ?><br />
20 <?php } ?>
21 </body>
22</html>

Android:

activity_login.xml
1<LinearLayout xmlns:tools="http://schemas.android.com/tools"
2 xmlns:android="http://schemas.android.com/apk/res/android"
3 android:id="@+id/LinearLayout1"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical"
7 android:paddingBottom="@dimen/activity_vertical_margin"
8 android:paddingLeft="@dimen/activity_horizontal_margin"
9 android:paddingRight="@dimen/activity_horizontal_margin"
10 android:paddingTop="@dimen/activity_vertical_margin"
11 tools:context=".MainActivity" >
12
13 <LinearLayout
14 android:layout_width="match_parent"
15 android:layout_height="wrap_content" >
16
17 <EditText
18 android:id="@+id/edtUsername"
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:layout_weight="1"
22 android:ems="10"
23 android:hint="@string/username"
24 android:inputType="textPersonName" >
25
26 <requestFocus />
27 </EditText>
28
29 <EditText
30 android:id="@+id/edtPassword"
31 android:layout_width="wrap_content"
32 android:layout_height="wrap_content"
33 android:layout_weight="1"
34 android:ems="10"
35 android:hint="@string/password"
36 android:inputType="textPassword" />
37 </LinearLayout>
38
39 <LinearLayout
40 android:layout_width="match_parent"
41 android:layout_height="wrap_content" >
42
43 <CheckBox
44 android:id="@+id/cbRemeber"
45 android:layout_width="match_parent"
46 android:layout_height="wrap_content"
47 android:layout_weight="1"
48 android:text="@string/remember" />
49
50 <RadioGroup
51 android:id="@+id/radioGroup1"
52 android:layout_width="match_parent"
53 android:layout_height="wrap_content"
54 android:layout_weight="1" >
55
56 <RadioButton
57 android:id="@+id/radioMale"
58 android:layout_width="wrap_content"
59 android:layout_height="wrap_content"
60 android:text="@string/male" />
61
62 <RadioButton
63 android:id="@+id/radioFemale"
64 android:layout_width="wrap_content"
65 android:layout_height="wrap_content"
66 android:text="@string/female" />
67 </RadioGroup>
68 </LinearLayout>
69
70 <Button
71 android:id="@+id/button1"
72 android:layout_width="match_parent"
73 android:layout_height="wrap_content"
74 android:text="@string/login" />
75
76 <WebView
77 android:id="@+id/webView1"
78 android:layout_width="match_parent"
79 android:layout_height="match_parent"
80 android:visibility="invisible"/>
81
82</LinearLayout>


Login.java
1import android.annotation.SuppressLint;
2import android.app.Activity;
3import android.os.Bundle;
4import android.view.View;
5import android.view.View.OnClickListener;
6import android.webkit.WebView;
7import android.webkit.WebViewClient;
8import android.widget.CheckBox;
9import android.widget.EditText;
10import android.widget.RadioButton;
11
12
13public class Login extends Activity {
14
15 private static final String url = "http://192.168.0.205/androidtut1/login.php"; /** Url-Pfad zur Login-Seite static also nicht änderbar **/
16 private View buttonLogin;
17 private EditText etUsername;
18 private EditText etPassword;
19 private CheckBox cbRemember;
20 private WebView wv;
21 private RadioButton rbMale;
22 private RadioButton rbFemale;
23 private boolean send;
24
25 @Override
26 protected void onCreate(Bundle savedInstanceState) {
27 super.onCreate(savedInstanceState);
28 setContentView(R.layout.activity_login);
29
30 buttonLogin = findViewById(R.id.button1);
31
32 wv = (WebView) findViewById(R.id.webView1);
33
34 etUsername = (EditText) findViewById(R.id.edtUsername);
35 etPassword = (EditText) findViewById(R.id.edtPassword);
36
37 cbRemember = (CheckBox) findViewById(R.id.cbRemeber);
38
39 rbMale = (RadioButton) findViewById(R.id.radioMale);
40 rbFemale = (RadioButton) findViewById(R.id.radioFemale);
41
42 buttonLogin.setOnClickListener(loginButtonOnClickListener);
43 }
44
45 OnClickListener loginButtonOnClickListener = new OnClickListener() {
46
47 @SuppressLint("SetJavaScriptEnabled")
48 @Override
49 public void onClick(View v) {
50 send = false; /** send auf "false" um nach erneutem klicken des Button das Abschicken der Zugangsdaten zu ermöglichen **/
51 wv.setVisibility(View.VISIBLE); /** Sichtbarkeit des WebView in der Activity herzustellen **/
52 wv.getSettings().setJavaScriptEnabled(true); /** wichtig um den JavaScript-Code auszuführen **/
53 wv.setWebViewClient(webViewClient); /** Zuweisung WebViewClient **/
54 wv.loadUrl(url);
55 }
56 };
57
58 WebViewClient webViewClient = new WebViewClient(){ /** Erstellen des WebViewClient um die Methode onPageFinished zu überschreiben**/
59
60 @Override
61 public void onPageFinished(WebView view, String url) {
62 if(!send) {
63 view.loadUrl("javascript:{" +
64 "document.getElementById('usernameId').value='" + etUsername.getText().toString() + "';" +
65
66 "document.getElementById('passwordId').value='" + etPassword.getText().toString() + "';" +
67
68 "document.getElementById('rememberId').checked=" + cbRemember.isChecked() + ";" +
69
70 "document.getElementById('gendermann').checked=" + rbMale.isChecked() + ";" +
71
72 "document.getElementById('genderfrau').checked=" + rbFemale.isChecked() + ";" +
73
74 "var form = document.getElementsByName('loginForm');" +
75
76 "form[0].submit();};");
77 send = true;
78 }
79 }
80 };
81}

AndroidManifest.xml
1<uses-permission android:name="android.permission.INTERNET" />

Es darf natürlich nicht die Internetberechtigung fehlen!


Erläuterungen:

public void onPageFinished(WebView view, String url) {
...
}
Damit nach dem Fertigen laden der Seite der JavaScript-Code ausgeführt wird. Die darin eingebettete if(!send) abfrage soll das Schleifen-artige ausführen des JS-Code verhindern.

  • buttonLogin = findViewById(R.id.button1); /** Zuweisung des Button aus unsere activity_login Layout **/
  • document.getElementById('usernameId').value='" + etUsername.getText().toString() + "'; /** Übergabe des EditText-Box Username Konvertiert in einen String **/
  • document.getElementById('passwordId').value='" + etPassword.getText().toString() + "'; /** Übergabe des EditText-Box Passwort Konvertiert in einen String **/
  • document.getElementById('rememberId').checked=" + cbRemember.isChecked() + "; /** Übergabe des Remember-CheckBox als boolean-Wert **/
  • document.getElementById('gendermann').checked=" + rbMale.isChecked() + "; /** Übergabe des RadioButton männlich als boolean-Wert **/
  • document.getElementById('genderfrau').checked=" + rbFemale.isChecked() + "; /** Übergabe des RadioButton weiblich als boolean-Wert **/
  • var form = document.getElementsByName('loginForm'); /** Erstellen der variable form da der Submit Button keinen name= und/oder id= Zuweisung erhalten hat **/
  • form[0].submit(); /** simulieren des "Entern" nach den eingaben **/


Bitte kein Kommentar zur Sicherheit mit JavaScript und Übermittlung von Daten!!! Das ist hier nur eine vereinfachte Anwendungsform.

— geändert am 29.12.2013 17:28:38

Gruß Ludy (App Entwickler)

Mein Beitrag hat dir geholfen? Lass doch ein "Danke" da.☺

Lebensmittelwarnung App-Thread

Download Samsung Firmware Tool

  • Forum-Beiträge: 1.793

29.12.2013 15:31:13 via App

Ein bisschen viel Code und ein bisschen zu wenig Erklärung für ein Tutorial :)

Nee, mal im Ernst: Den ein oder anderen Satz könntest du (zumindestens für den Android-Teil) schreiben!

Auch etwas unübersichtlich, dass alles in der onCreate steht.

Hilft aber sicher dem ein oder anderen.

LG

Liebe Grüße impjor.

Für ein gutes Miteinander: Unsere Regeln
Apps für jeden Einsatzzweck
Stellt eure App vor!

Ludy
  • Mod
  • Blogger
  • Forum-Beiträge: 6.647

29.12.2013 17:31:38 via Website

So hoffe jetzt ist es Okay war/ist mein erstes Tutorial.

Danke für die Kritik, wenn noch was zu ändern ist oder besser gemacht werden kann dann immer rannnnnn damit.

Gruß Ludy (App Entwickler)

Mein Beitrag hat dir geholfen? Lass doch ein "Danke" da.☺

Lebensmittelwarnung App-Thread

Download Samsung Firmware Tool

Pascal P.
  • Mod
  • Blogger
  • Forum-Beiträge: 9.203

02.10.2014 16:00:07 via Website

Ich habe deinen Thread mal angepinnt, damit er nicht verloren geht :)

LG Pascal

LG Pascal //It's not a bug, it's a feature. :) ;)

  • Forum-Beiträge: 10

19.11.2014 21:12:33 via Website

Das Tutorial hat mir wirklich geholfen, vielen Dank! :)

Nur habe ich noch eine Frage, bei mir funktioniert das mit dem Buttonklick form[0].submit();}nicht.
Gibt es eine andere Möglichkeit den Button zuklicken ohne die ID zu kennen? Gibt es eine Möglichkeit das über den 'name=blabla' zu machen? :)

EDIT:

Habe es rausbekommen, hintendran einfach javascript:document.getElementsByTagName('submit').submit();einfügen

— geändert am 19.11.2014 21:26:19

Ludy
  • Mod
  • Blogger
  • Forum-Beiträge: 6.647

19.11.2014 21:30:07 via App

Wie du in dem Beispiel sehen kannst hat der submitButton keine ID sondern nur das Form selber. Es gibt so gut wie immer nen anderen Weg, das pauschal zu sagen wie das Umzusetzen ist, sehr schwierig. Der Quellcode ist zu analysieren um JavaScript richtig einzusetzen.

Gruß Ludy (App Entwickler)

Mein Beitrag hat dir geholfen? Lass doch ein "Danke" da.☺

Lebensmittelwarnung App-Thread

Download Samsung Firmware Tool