Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

inAppBrowser Pluginを使ってionicで外部のページを表示する

inAppBrowser Pluginを使ってionicで外部のページを表示する方法です。

実際のところ

ionic v1の環境を想定します。
ngCordovaとcordova-plugin-inappbrowserが必要です。

$ bower install ngCordova
$ cordova plugin add cordova-plugin-inappbrowser

入ったngCordovaをwww/index.htmlで読み込み

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

ボタンは以下のような感じ。

<a class="button" ng-click="goPage()">ページを表示</a>

controllerでは"$cordovaInAppBrowser"経由で各種動作を行います。

var appControllers = angular.module('starter.controllers', [ "ngCordova", ...]);

appControllers.controller('HogeCtrl', function ($scope, ... , $cordovaInAppBrowser) {
    // ...

    //カレンダー表示
    $scope.goPage = function() {
	var options = {
	    location: 'yes',
	    clearcache: 'yes',
	    toolbar: 'yes',
	    closebuttoncaption: '閉じる'
	};
	var url = YOUR_LINK;
	
	$cordovaInAppBrowser.open(url, '_blank', options)
            .then(function(event) {
		// success
            })
            .catch(function(event) {
		// error
            });
    };

参考もと