読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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
            });
    };