อย่าลืม share ให้มนุษย์ Android คนอื่นด้วยหละ 😎
![[Tip/Trick] วิธีติดต่อกับ WebView ผ่าน JavascriptInterface มันเท่มาก](/_next/image?url=https%3A%2F%2Fimage.nextzy.tech%2F1_Aleix_TFC_7yz_Qh_Q_Sx_GV_Rqxw_a29e28219a.png&w=3840&q=75)
Table of contents
Nonthawit
CEO | Engineer | Designer
VIEW
8,434
CATEGORY
LAST UPDATED
January 15, 2018
อีก 1 ความสามารถที่ทำให้ฝั่ง web และ android ติดต่อกันได้ เช่น ฝั่ง android สามารถ แก้ไข/ดึงค่าบางอย่าง จากเว็บไซต์เพื่อมาประมวลผลบางอย่าง หรือ ฝั่ง web อยากเรียกใช้ method บน android
JavascriptInterface ช่วยคุณได้
แต่มีข้อแม้ว่าต้องเขียน Basic JavaScript เป็นนิดหน่อยเนาะ อย่างเช่น
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
What is JavascriptInterface
มันทำหน้าที่เหมือนสะพานเชื่อมโค้ดสองฝั่งนั่นเอง
ให้ฝั่งเว็บสามารถเรียก methoud บน android ได้ และ android ก็สามารถสั่งให้เว็บทำอะไรก็ได้เช่นกัน โดยภาษาที่ใช้ติดต่อคือ Javascript ที่ mobile developer อย่างเราคุ้นเคยกันเป็นอย่างดี 😒
โดยเราต้อง addJavascriptInterface(object, key) ให้ WebView ของเราก่อนเพื่อเปิดใช้ feature นี้
webview.addJavascriptInterface(this, "WebViewJS")
โดย key นี่แหละที่ใช้เป็นสะพานติดต่อทั้งสองฝั่ง
และต้องเขียน method รอไว้พร้อมกับประกาศ JavascriptInterface annotation ไว้ด้วย เดี๋ยว webview เรียกกลับมาแล้วมันไม่เจอ
ตัวอย่างเช่น
@JavascriptInterface
fun someMethodOnAndroid(body: String) {
...
}
เราขอแยกเป็น 2 กรณี
- Android ติดต่อกับ WebView
- WebView ติดต่อกับมาที่ Android
1. Android ติดต่อกับ WebView
ตัวอย่าง: เราต้องการดึง html string ทั้งหน้าที่โชว์อยู่บน WebView
'<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'แล้วเราจะได้ html string ส่งกลับมาที่ method someMethodOnAndroid(…) ที่เราประกาศไว้
NOTE: ถ้าโปรเจกไหน minimum SDK ≥ 19 ขึ้นไปสามารถใช้
webview.evaluateJavascript(script_string, result_callback)
แทน webview.loadUrl(…) ได้เลย
2. WebView ติดต่อกับมาที่ Android
ตัวอย่างของ HTML file ที่ใช้เรียก method บน android
NOTE: ในส่วนนี้ lint จะไม่ check syntax ให้นะเราต้องตรวจความถูกต้องเอาเอง เช่น ชื่อ method ต้องตรงกันเป๊ะ , ห้ามลืม ; เป็นต้น 😱
ง่ายๆแค่นี้แหละไปดูตัวอย่างกันต่อ
Example Code
ในตัวอย่างนี้เราจะสร้าง WebView ขึ้นมาแปะบน activity แล้ว redirect ไปที่ www.google.com
โจทย์เราคือ
- เปลี่ยน placeholder ตรงช่อง google search
- โชว์ความสูงโดยสร้าง <div>…</div> ต่อข้างล่างช่อง google search
โดยทุกอย่างทำผ่านฝั่ง android ทั้งหมด โค้ดทั้งหมดตามนี้
การทำงานๆหลักของโค้ดชุดนี้คือทุกครั้งที่WebView โหลดเสร็จ method onPageFinished(…) จะถูกเรียก
ซึ่งข้างในมีการเรียก 2 คำสั่งดังนี้
1. webview.loadUrl("javascript:$WEBVIEW_JS.onHeight(document.body.getBoundingClientRect().height)")2. changeHintInput()
มาดูคำสั่งแรกกันให้เรามา focus บรรทัดที่ 32
val WEBVIEW_JS = "WebViewJS"
...
webview.addJavascriptInterface(this, WEBVIEW_JS)
...
เพื่อบอก WebView ว่าให้
สามารถใช้ JavascriptInterface ผ่าน key ชื่อ “WebViewJS” นั่นเอง
ต่อมากลับมาดูบรรทัดที่ 13
เราสามารถเขียน Javascript สั่ง WebView ได้ผ่าน loadUrl(…) ได้เลยนี่แหละคือความเท่ของมัน ในตัวอย่างนี้คือ การดึงความสูงของ content ที่อยู่ใน body แล้วให้ส่งกลับมาให้ method ชื่อ onHeight(…) ในบรรทัด 48 นั่นเอง (ชื่อต้องตรงเป๊ะ ไม่มี lint มาเตือนให้นะ 😱)
ซึ่งใน onHeight(…) เราทำการสร้าง div tag ไปต่อท้าย element id=main (inspect ดูเอาได้เลย ว่ามันอยู่ตรงไหน) เพื่อโชว์ค่าความสูงที่ส่งเข้ามา
มาดูตัวที่ 2 คือ changeHintInput( ) ทำหน้าที่เปลี่ยน placeholder ในช่อง google search ให้เป็น “The Khaeng placeholder”
NOTE: อย่าลืมเรื่อง proguard rules
keepclassmembers class * {
@android.webkit.JavascriptInterface <methods>;
}
เพราะว่าตอนเรา build release มันจะมองว่า method onHeight(…) มันไม่ได้ใช้ (unused) แล้ว proguard มันจะตัดออกให้ครับ ระวังจุดนี้กันด้วย
ตัวอย่างง่ายๆประมาณนี้ลองไปประยุกต์ใช้กับงานตัวเองต่อกันได้เลย มันก็จะเท่ๆประมานนี้แหละ 😎
Summary
บล็อกนี้เราอยากจะแชร์อีก 1 วิธีการติดต่อกับ WebView ว่าเราสามารถใช้ความสามารถของ JavascriptInterface ได้นะ ไปลองประยุกต์ใช้กันตามใจชอบได้เลย
วันนี้พอแค่นี้เจอกันบล็อกหน้าเนาะ 😎
Share:
KNOWLEDGE
Related Articles
Nonthawit
CEO | Engineer | Designer
เข้าใจการทำ Selector แบบ Ripple effect
Nonthawit
CEO | Engineer | Designer
20 สิ่ง ที่ได้หลังจากเป็น Android developer ที่ Nextzy 3 เดือน
บทความนี้แชร์ประสบการณ์ 3 เดือนแรกของการทำงานเป็น Android Developer ที่ Nextzy ครอบคลุมทั้งด้าน technical เช่น MVP architecture, Android Lifecycle, ProGuard, Git workflow และการเขียน Unit Test รวมถึงด้าน soft skill อย่างการสื่อสารกับทีม, การแชร์ความรู้, และการเขียนโค้ดให้ readable และยืดหยุ่น นอกจากนี้ยังสะท้อนวัฒนธรรมองค์กรที่เน้นทีมเวิร์ค การ review โค้ด และบรรยากาศการทำงานที่สนุกสนาน ซึ่งล้วนช่วยลด learning curve และพัฒนาทักษะได้เร็วกว่าการเรียนรู้คนเดียว
Nonthawit
CEO | Engineer | Designer
Quantum Computer จะมาปฏิวัติอุตสาหกรรมโลกครั้งต่อไป ไม่ต่างอะไรกับยุคที่เปลี่ยนจากแรงงานคนมาเป็นพลังไอน้ำในศตวรรษที่ 18
Quantum Computer คือ "เครื่องจักรไอน้ำ" แห่งศตวรรษที่ 21 — เมื่อกฎของมัวร์เริ่มถึงทางตัน นักวิทยาศาสตร์จึงหันมาสร้างคอมพิวเตอร์ที่ใช้ทรานซิสเตอร์ระดับอะตอม ประมวลผล 0 และ 1 พร้อมกันได้ในทีเดียว (Qubit) เร็วกว่าคอมทั่วไปหลายร้อยล้านเท่า บทความนี้พาย้อนดูตั้งแต่การปฏิวัติอุตสาหกรรมครั้งแรก มาจนถึง Quantum Computer ว่ามันคืออะไร ทำงานยังไง มีข้อจำกัดอะไรบ้าง และจะมา disrupt อุตสาหกรรมโลกอย่างไรในอีก 5-10 ปีข้างหน้า
