Cordova-InAppBrowser

이 플러그인은 Cordova 앱 내에서 웹 브라우저를 여는 데 사용됩니다.

1 단계-플러그인 설치

이 플러그인을 다음 위치에 설치해야합니다. command prompt 창을 사용하기 전에

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

2 단계-추가 버튼

여는 데 사용할 하나의 버튼을 추가합니다 inAppBrowser 창 index.html.

3 단계-이벤트 리스너 추가

이제 버튼에 대한 이벤트 리스너를 추가하겠습니다. onDeviceReady 기능 index.js.

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

4 단계-함수 생성

이 단계에서는 앱 내에서 브라우저를 여는 함수를 만듭니다. 우리는 그것을ref 나중에 이벤트 리스너를 추가하는 데 사용할 수있는 변수입니다.

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...')
   }
}

우리가 누르면 BROWSER 버튼을 누르면 화면에 다음과 같은 출력이 표시됩니다.

콘솔도 이벤트를 수신합니다. loadstart URL이로드되기 시작하면 이벤트가 발생하고 loadstopURL이로드되면 실행됩니다. 콘솔에서 볼 수 있습니다.

브라우저를 닫으면 exit 이벤트가 발생합니다.

InAppBrowser 창에는 다른 가능한 옵션이 있습니다. 아래 표에서 설명하겠습니다.

S. 아니	옵션 및 세부 정보
1	location 브라우저 위치 표시 줄을 켜거나 끄는 데 사용됩니다. 가치는yes 또는 no.
2	hidden inAppBrowser를 숨기거나 표시하는 데 사용됩니다. 가치는yes 또는 no.
삼	clearCache 브라우저 쿠키 캐시를 지우는 데 사용됩니다. 가치는yes 또는 no.
4	clearsessioncache 세션 쿠키 캐시를 지우는 데 사용됩니다. 가치는yes 또는 no.
5	zoom Android 브라우저의 확대 / 축소 컨트롤을 숨기거나 표시하는 데 사용됩니다. 가치는yes 또는 no.
6	hardwareback yes 하드웨어 뒤로 버튼을 사용하여 브라우저 기록을 다시 탐색합니다. no 뒤로 버튼을 클릭하면 브라우저를 닫습니다.

우리는 사용할 수 있습니다 ref(참조) 다른 기능에 대한 변수. 이에 대한 간단한 예를 보여 드리겠습니다. 이벤트 리스너를 제거하려면 다음을 사용할 수 있습니다.

ref.removeEventListener(eventname, callback);

InAppBrowser를 닫으려면 다음을 사용할 수 있습니다.

ref.close();

숨겨진 창을 열면 표시 할 수 있습니다.

ref.show();

JavaScript 코드도 InAppBrowser에 삽입 할 수 있습니다.

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

동일한 개념이 CSS 주입에 사용될 수 있습니다.

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