PhoneGap/Cordova에서 inappbrowser 사용

개요

꽤 전에 PhoneGap/Cordova 앱에서 브라우저를 호출하는 방법으로 다음을 썼습니다.

PhoneGap 링크를 브라우저에서 열기

이 방법 자체는 지금도 움직이지만 ...
iOS의 경우 이 방법으로 브라우저를 열면 Apple 심사에서 떨어지게 되었습니다.
동일한 플러그인에서 인앱 브라우저를 열어야 합니다.
※최근 Facebook 앱도 Twitter 앱도 앱 밖에 나오지 않게 되어 있는 것은 이 Apple 정책 때문입니다.

PhoneGap/Cordova에서 인앱 브라우저를 실현하는 플러그인 "inappbrowser"를 움직여 본 메모입니다.

환경

Win→Android PhoneGap 6.4.3
Mac→iOS PhoneGap 6.2.5

꽤 오래되었지만 이 기사 환경을 기반으로합니다.

플러그인 내장 및 호출 방법

※ 이하, PowerShell에서 커맨드 입력
※ Cordova로 환경을 만들고 있는 분은 phonegap를 cordova로 읽어 주십시오.

새로운 앱 만들기

phonegap create test170418
cd test170418

플러그인 내장

phonegap plugin add cordova-plugin-inappbrowser

기본 HTML(www/index.html)을 다시 작성해 봅니다.

인앱 브라우저 시작은 window.open에서 대상을 _blank로 설정하여 엽니다.
다양한 시도를 할 수 있도록 linkOpen이라는 함수를 만듭니다.

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <button onclick="linkOpen(1)">LINK 1</button><br>
        <button onclick="linkOpen(2)">LINK 2</button><br>
        <button onclick="linkOpen(3)">LINK 3</button><br>
        <button onclick="linkOpen(4)">LINK 4</button><br>
        <button onclick="linkOpen(5)">LINK 5</button><br>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();

function linkOpen(_num){
  switch(_num){
    case 1:
      //オプションなし
      window.open('https://www.google.co.jp/','_blank','');
      break;
    case 2:
      //アドレス表示
      window.open('https://www.google.co.jp/','_blank','location=yes');
      break;
    case 3:
      //アドレス非表示
      window.open('https://www.google.co.jp/','_blank','location=no');
      break;
    case 4:
      //アドレス表示、閉じるボタンのキャプション変更（iOSのみ）
      window.open('https://www.google.co.jp/','_blank','location=yes,closebuttoncaption=おしまい');
      break;
    case 5:
      //アドレス表示、ツールバー非表示（iOSのみ）
      window.open('https://www.google.co.jp/','_blank','location=yes,toolbar=no');
      break;
  }
}

    </script>
</body>