Android webview lấy dữ liệu từ javascript

Một trong những trường hợp sử dụng phổ biến nhất trong phát triển ứng dụng di động gốc là gửi và nhận dữ liệu từ WebView sang gốc và ngược lại. Có một số quan niệm sai lầm khi xử lý tình huống này trong iOS/Android. Hãy đi sâu vào thực tế

Ảnh của Everaldo Coelho trên Bapt

Nhiều ứng dụng di động có các tính năng phổ biến như đăng nhập với nhà cung cấp bên thứ ba, trong đó, lớp gốc sẽ tương tác với chế độ xem web được nhúng. Hoặc các cổng thanh toán gửi lại thành công/thất bại/mã thông báo, v.v. về nguồn gốc để tiếp tục. Dù trong hoàn cảnh nào, sự tương tác giữa lớp gốc và chế độ xem web là điều cần thiết

Điểm 1

Có thực sự khó để làm cho luồng hoạt động trong khi nhận lệnh gọi lại từ lớp WebView sang lớp Gốc không?

Điểm #2

Việc gửi dữ liệu từ Gốc sang WebView hoặc cách khác có phải là một mớ hỗn độn không?🤔

Nhưng thực tế là cả hai nền tảng đều cung cấp cách thuận tiện cho loại hình giao tiếp này. Hướng dẫn này cho thấy cách đạt được điều này trong iOS và Android. Để trình diễn, tôi đã bao gồm chế độ xem web trong cả hai mẫu có nền màu xanh lá cây với trường nhập liệu và nút. Tương tự bản địa có trường đầu vào và nút trong nền trắng. Dữ liệu gửi từ nguồn gốc sẽ thay thế trường nhập liệu trên web và ngược lại. 🧐

Gửi và nhận dữ liệu từ iOS gốc đến webview

Gửi và nhận dữ liệu từ Android gốc đến chế độ xem web

Tải một trang Html, trang này sẽ được gửi từ máy chủ đến thiết bị di động hoặc tải một tệp Html chung được lưu trong bộ nhớ cache của ứng dụng. Để trình diễn, hãy để tệp Html trong cả hai nền tảng được lưu cục bộ và tải trong WebView

Nguồn tương ứng. Nguồn Github iOS và Nguồn Github Android

1 — iOS

1. 1 Để nhận dữ liệu từ webview. Chúng tôi sẽ sử dụng giao thức WKScriptMessageHandler. Điều này sẽ giúp chúng tôi thêm trình xử lý tin nhắn script từ bản địa với tên cụ thể của trình xử lý tin nhắn

var mNativeToWebHandler : String = “jsMessageHandler”mWebKitView.configuration.userContentController.add(self, name: mNativeToWebHandler)

Sau này, chúng ta có thể sử dụng chức năng userContentController để theo dõi trình xử lý cụ thể

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == mNativeToWebHandler {mEdtTxt.text = message.body as? String}}

Bây giờ chúng ta cần có chức năng trong HTML JS Script để gửi dữ liệu từ trang HTML. Cái nào sẽ giống như dưới đây. Giữ nguyên tên của trình xử lý thư trong JS Script

function sendMessage(){var valueToSend = //your data from htmlwindow.webkit.messageHandlers.jsMessageHandler.postMessage(valueToSend);}

1. 2 Để gửi dữ liệu từ Gốc sang WebView, chúng tôi có thể sử dụng phương thức đánh giáJavaScript của WKWebView từ gốc

var data = //your data from nativeself.mWebKitView.evaluateJavaScript(“document.getElementById(‘inputField’).value=’\(data)’”)

Và thành phần HTML sẽ là

<input id="inputField" style="height:50px;width:300px;font-size:20pt;" type="text" value="">

Điều này sẽ trực tiếp thay thế phần tử tương ứng trong chế độ xem web. 😊👏 🎉

2 — Android

2. 1 Để nhận dữ liệu từ chế độ xem web, chúng ta có thể tạo giao diện, giao diện này sẽ cho phép chế độ xem web kết nối lớp gốc và truyền dữ liệu

function sendMessage() {
var valueReceived = document.getElementById("inputField").value;
JSBridge.showMessageInNative(valueReceived);
}
<input id="inputField" style="height:50px;width:300px;font-size:20pt;" type="text" value="">

Từ lớp gốc, tạo một lớp và sao chép như sau

class JSBridge(){
@JavascriptInterface
fun showMessageInNative(message:String){
//Received message from webview in native, process data }
}

Trong khi định cấu hình chế độ xem web, chúng ta cần đặt giao diện JavaScript như lớp JSBridge ở trên

mWebViewComponent.settings.javaScriptEnabled = true
mWebViewComponent.addJavascriptInterface(JSBridge(),"JSBridge")

Xem xét bảo mật

Nếu chúng tôi đang tải các trang web được hệ sinh thái của chúng tôi biết đến, thì điều này sẽ không có bất kỳ vấn đề nào về bảo mật. Nếu không, việc mở giao diện và cho phép WebView giao tiếp với người bản địa có thể nguy hiểm. 🧐

Theo tài liệu API của Android

Khi HTML trong WebView không đáng tin cậy (ví dụ: một phần hoặc toàn bộ HTML được cung cấp bởi một người hoặc quy trình không xác định), thì kẻ tấn công có thể bao gồm HTML thực thi mã phía máy khách của bạn và có thể là bất kỳ mã nào do kẻ tấn công chọn. Như vậy, bạn không nên sử dụng addJavascriptInterface() trừ khi bạn đã viết tất cả HTML và JavaScript xuất hiện trong WebView của mình. Bạn cũng không nên cho phép người dùng điều hướng đến các trang web khác không phải của riêng bạn, trong WebView của bạn. Thay vào đó, hãy cho phép ứng dụng trình duyệt mặc định của người dùng mở các liên kết nước ngoài

2. 1 Để gửi dữ liệu từ lớp gốc tới Webview

Tạo một hàm trong JavaScript để nhận dữ liệu trong Html. Cái nào sẽ cập nhật inputField với giá trị nhận được

________số 8_______

Bây giờ từ lớp gốc, chúng ta có thể truy cập chức năng này bằng cách sau. 😊👏 🎉

private fun sendDataToWebView(){
mWebViewComponent.evaluateJavascript(
"javascript: " +"updateFromNative(\"" + mEditText.text +
"\")",null)
}

Và thế là xong, cả hai nền tảng đều được bảo hiểm 😊👏 🎉

Bây giờ, khi bạn đã có bức tranh rõ ràng về giao tiếp Gốc và WebView, hãy dùng thử và kiểm tra xem chúng hoạt động như thế nào trong cả hai nền tảng. 😇

Làm cách nào để lấy dữ liệu từ WebView trong Android theo chương trình?

Tùy thuộc vào yêu cầu của bạn, bạn có thể tìm nạp nội dung của WebView từ web bằng cách sử dụng webView. loadUrl(" hoặc bạn có thể liên kết mã trực tiếp (e. g. sau khi tải nó từ nội dung) bằng webView. loadDataWithBaseURL("", html, "text/html", "UTF-8", null).

Làm cách nào để sử dụng JavaScript trong WebView trong Android?

Bật JavaScript . Bạn có thể truy xuất WebSettings bằng getSettings() , sau đó bật JavaScript bằng setJavaScriptEnabled() . WebView myWebView = (WebView) findViewById(R. nhận dạng.

Làm cách nào để đọc dữ liệu từ WebView trong Android?

2 — Android. 2. 1 Để nhận dữ liệu từ chế độ xem web, chúng tôi có thể tạo giao diện, giao diện này sẽ cho phép chế độ xem web kết nối lớp gốc và truyền dữ liệu . Từ lớp gốc, tạo một lớp và sao chép như sau. Trong khi định cấu hình chế độ xem web, chúng ta cần đặt giao diện JavaScript như lớp JSBridge ở trên.

Làm cách nào để đưa JavaScript vào WebView trong Android?

Đưa JavaScript vào Android WebView .
Bằng cách sử dụng loadUrl() -> API cấp 18 trở xuống. Với loadUrl(), giao diện người dùng sẽ được làm mới khi tập lệnh được áp dụng và nó không trả về bất kỳ giá trị nào. .
Bằng cách sử dụng đánh giáJavascript() -> API cấp 19 trở lên