Cordova - InAppBrowser

Plugin này được sử dụng để mở trình duyệt web bên trong ứng dụng Cordova.

Bước 1 - Cài đặt Plugin

Chúng tôi cần cài đặt plugin này trong command prompt cửa sổ trước khi chúng tôi có thể sử dụng nó.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Bước 2 - Thêm nút

Chúng tôi sẽ thêm một nút sẽ được sử dụng để mở inAppBrowser cửa sổ trong index.html.

Bước 3 - Thêm trình xử lý sự kiện

Bây giờ, hãy thêm trình xử lý sự kiện cho nút của chúng tôi trong onDeviceReady chức năng trong index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Bước 4 - Tạo chức năng

Trong bước này, chúng tôi đang tạo chức năng sẽ mở trình duyệt bên trong ứng dụng của chúng tôi. Chúng tôi đang gán nó choref biến mà chúng ta có thể sử dụng sau này để thêm trình nghe sự kiện.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Nếu chúng ta nhấn BROWSER , chúng ta sẽ thấy kết quả sau trên màn hình.

Bảng điều khiển cũng sẽ lắng nghe các sự kiện. loadstart sự kiện sẽ kích hoạt khi URL bắt đầu tải và loadstopsẽ kích hoạt khi URL được tải. Chúng ta có thể thấy nó trong bảng điều khiển.

Sau khi chúng tôi đóng trình duyệt, exit sự kiện sẽ khai hỏa.

Có các tùy chọn khả thi khác cho cửa sổ InAppBrowser. Chúng tôi sẽ giải thích nó trong bảng dưới đây.

S. không	tùy chọn và chi tiết
1	location Được sử dụng để bật hoặc tắt thanh vị trí của trình duyệt. Giá trị làyes hoặc là no.
2	hidden Được sử dụng để ẩn hoặc hiển thị trongAppBrowser. Giá trị làyes hoặc là no.
3	clearCache Được sử dụng để xóa bộ nhớ cache cookie của trình duyệt. Giá trị làyes hoặc là no.
4	clearsessioncache Được sử dụng để xóa bộ nhớ cache cookie phiên. Giá trị làyes hoặc là no.
5	zoom Được sử dụng để ẩn hoặc hiển thị các điều khiển thu phóng của trình duyệt Android. Giá trị làyes hoặc là no.
6	hardwareback yes sử dụng nút quay lại phần cứng để điều hướng quay lại lịch sử trình duyệt. no để đóng trình duyệt sau khi nhấp vào nút quay lại.

Chúng ta có thể sử dụng ref(tham chiếu) biến cho một số chức năng khác. Chúng tôi sẽ chỉ cho bạn những ví dụ nhanh về nó. Để xóa trình nghe sự kiện, chúng tôi có thể sử dụng -

ref.removeEventListener(eventname, callback);

Để đóng InAppBrowser, chúng ta có thể sử dụng -

ref.close();

Nếu chúng tôi đã mở cửa sổ ẩn, chúng tôi có thể hiển thị nó -

ref.show();

Ngay cả mã JavaScript cũng có thể được đưa vào InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

Khái niệm tương tự có thể được sử dụng để tiêm CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);