Phòng thu android javascript

WebView là một thành phần đặc biệt trong Android close vai trò là loại trình duyệt tích hợp bên trong các ứng dụng Android. Nếu bạn muốn thực thi mã HTML, CSS hoặc JavaScript trong ứng dụng Android của mình hoặc bạn cần cho phép người dùng truy cập URL mà không cần rời khỏi ứng dụng của bạn, thì WebView là cách để đi. Thành phần này không được sử dụng rất thường xuyên, nhưng trong một số trường hợp, việc sử dụng WebView chỉ đơn giản là sự thay đổi tốt nhất với các yêu cầu

Do đó, trong bài đăng này, tôi sẽ giải thích cách thiết lập giao tiếp giữa mã bản địa trên mạng và phần bên trong WebView trong ứng dụng Android, có thể là nhiệm vụ công thức đáng ngạc nhiên

HTML, CSS và JavaScript cho Android Webview

Với mục đích của hướng dẫn này, hãy tưởng tượng rằng WebView của bạn thực thi mã sau

    
    
    




    

        Change color
    

    

        
    

    

        Show toast
    

Don Tiết lo lắng nếu chức năng này không có ý nghĩa. Tôi đã thiết kế nó cho mục đích của hướng dẫn này, vì vậy tôi sẽ đề cập đến các phần cụ thể của mã này trong các phần sau

Tùy thuộc vào yêu cầu của bạn, bạn có thể tìm tải nội dung của WebView từ Web bằng phương thức

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Bật hỗ trợ JavaScript WebView

Theo HTML ở trên, nút trên cùng sẽ thay đổi màu sắc của chính nó khi bạn nhấp vào nó. Tuy nhiên, trong thực tế, nếu bạn chỉ cần đưa mã này vào WebView, rất có thể nó sẽ không làm được gì cả. Lý do cho điều này là hỗ trợ JavaScript trong WebView bị tắt theo mặc định, do đó, bạn cần phải kích hoạt thủ công. Đây là một biện pháp phòng ngừa bảo mật được tạo ra bởi thực tế là thực thi mã JavaScript ngẫu nhiên có thể gây rủi ro từ điểm bảo mật

Để bật JavaScript bên trong WebView, hãy thực hiện lệnh này

webView.settings.javaScriptEnabled = true

Sau đó, nút nên hoạt động như mong đợi

Đánh giá mã JavaScript bên ngoài trong WebView

Ví dụ trước đó đã chứng minh việc thực thi mã JavaScript có bên trong HTML ban đầu. Nhưng điều gì sẽ xảy ra nếu bạn muốn tiêm mã từ bên ngoài thì sao?

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Ví dụ. mã gốc sau sẽ dẫn đến việc thay đổi màu nền của WebView thành màu xanh

webView.evaluateJavascript("document.body.style.background = 'blue';", null)

Đánh giá mã JavaScript bên ngoài trong WebView và trả về giá trị

Trong ví dụ trước, tôi đã chuyển một số mã JavaScript vào WebView và đánh giá nó. That is next a direction. Có cách nào để sử dụng một cách tiếp cận tương tự, nhưng cũng trả lại một số dữ liệu trở lại địa chỉ?

Mã này sẽ hiển thị thông báo bánh mì nướng bằng nội dung của phần tử nhập

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Lưu cú pháp liên quan hơn của mã JavaScript tại đây. Mặc dù trong ví dụ trước, tôi chỉ có thể viết JavaScript logic, bây giờ tôi cũng phải gửi nó vào một hàm ẩn danh và đánh giá chức năng đó

Ngoài ra, nếu bạn chạy mã trên, bạn sẽ nhận thấy rằng văn bản được hiển thị trong bánh mì nướng được đặt trong các trích dẫn kép. Điều đó là do giá trị trả về từ hàm JavaScript được gói vào giá trị JSON, đối tượng JSON hoặc mảng JSON (tùy thuộc vào những gì chức năng thực sự trả về) trước khi nó chuyển đến cuộc gọi lại bản gốc của bạn. Do đó, bạn cần phải mở giá trị trả về để lấy dữ liệu gốc

Chức năng JavaScript được gọi bên trong WebView từ mã Android gốc

Bây giờ, hãy thảo luận về một thoáng trường hợp sử dụng khác nhau. Hãy tưởng tượng rằng bạn biết rằng có một chức năng JavaScript cụ thể bên trong WebView và bạn muốn gọi nó từ bên ngoài. Làm thế nào bạn sẽ đi về điều này?

Chà, cú pháp rất giống nhau, nhưng, thay vì xác định logic của riêng bạn, chỉ cần định tên hàm để gọi

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Chuyển tham số cho chức năng JavaScript bên trong WebView

Nếu bạn sẽ gọi các chức năng đã được xác định trước bên trong WebView, bạn cũng có thể chuyển các tham số bổ sung vào chúng. Cú pháp đơn giản

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Thật không may, sự đơn giản rõ ràng của phương pháp này là sai lệch. Nếu bạn có thể chắc chắn rằng các đối số giành được có chứa bất kỳ ký tự đặc biệt nào, thì bạn sẽ ổn thôi. Nếu không, bạn có thể gặp sự cố. Ví dụ. nếu bất kỳ đối số nào trong ví dụ trên sẽ chứa các ký tự trích dẫn duy nhất, kết quả mã JavaScript sẽ không hợp lệ. Ngoài ra, nếu các đối số có thể là đa dòng, tốt hơn là bạn nên coi chừng

Giải pháp cho vấn đề này là thoát khỏi tất cả các ký tự đặc biệt trong các đối số trước khi bạn xây dựng mã JavaScript. Các chi tiết, tuy nhiên, không nằm trong phạm vi của bài viết này. Có rất nhiều thông tin về việc thoát khỏi các đối số JavaScript bên ngoài kia, vì vậy, bây giờ, bạn đã biết về cạm bẫy này, bạn có thể tìm kiếm nó

Call Android root from side in WebView

Cho đến nay, tôi đã trình diễn cách bắt đầu các luồng khác nhau liên quan đến nội dung WebView từ phía bản địa. Tuy nhiên, trong một số trường hợp, bạn muốn thực hiện đảo ngược chính xác và gọi đến mã gốc từ bên trong WebView chính. Điều đó có thể, nhưng giải pháp có liên quan nhiều hơn một chút

Đầu tiên, trong mã gốc của bạn, bạn cần xác định giao diện gốc của Google, sẽ được tiếp xúc với mã JavaScript bên trong WebView

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Yêu cầu thực tế là giao diện này

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

    webView.setWebChromeClient(new CustomWebChromeClient());

Khi bạn đã xác định giao diện này, bạn cần thêm nó vào WebView

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Đối số đầu tiên là giao diện chính và đối số thứ hai là tên của trường hợp đó bên trong WebView. Nó không yêu cầu chúng giống nhau, nhưng điều này nghe có vẻ như là một lựa chọn mặc định hợp lý

Sau hai bước trên, bạn sẽ có thể gọi các phương thức trên giao diện gốc này, từ bên trong mã JavaScript bên trong WebView

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Có tính đến thực tế là phương thức

    webView.setWebChromeClient(new CustomWebChromeClient());

Truy cập bảng thông báo điều khiển JavaScript WebView trong mã Android gốc

Nếu bạn sẽ làm việc với WebView trong Android, rất có thể bạn sẽ muốn đọc các tin nhắn giao diện điều khiển của nó. Đây là một công cụ tốt để ghi nhật ký và sửa lỗi cơ bản

Tuy nhiên, nếu bạn chỉ cần thêm câu lệnh này bên trong mã JavaScript của mình, bạn sẽ giành được bất kỳ đầu ra nào

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Để chặn bảng thông báo điều khiển bên trong mã gốc, bạn cần sử dụng thủ thuật sau

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Trong trường hợp này, tôi chỉ cần điều khiển tin nhắn trong logcat Android, nhưng bạn có thể làm bất cứ điều gì bạn muốn với chúng

Kết luận

WebView là một thành phần thích hợp và hơi lạ, nhưng nó có các trường hợp sử dụng. Vì vậy, nếu bạn không gặp may và phải phản đối WebView trong ứng dụng của bạn, thì ít nhất, tôi hy vọng rằng bài viết này sẽ làm cho hành trình của bạn mượt mà hơn một chút