Ludy
- Admin
- Forum-Beiträge: 7.958
28.12.2013, 15:06:58 via Website
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
Android:
activity_login.xml
Login.java
AndroidManifest.xml
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.
Bitte kein Kommentar zur Sicherheit mit JavaScript und Übermittlung von Daten!!! Das ist hier nur eine vereinfachte Anwendungsform.
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>
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>
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}
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.☺
✴
☕ Buy Me A Coffee ☕
✴
Lebensmittelwarnung-App
✴
✨Meine Wunschliste✨
✴
📲Telegram NextPit News📲
Empfohlener redaktioneller Inhalt
Mit Deiner Zustimmung wird hier ein externer Inhalt geladen.
Mit Klick auf den oben stehenden Button erklärst Du Dich damit einverstanden, dass Dir externe Inhalte angezeigt werden dürfen. Dabei können personenbezogene Daten an Drittanbieter übermittelt werden. Mehr Infos dazu findest Du in unserer Datenschutzerklärung.