お世話になります。
ons-tabbar-itemのpage属性に外部サイトのURLを記述すると、アプリの中で開くため、
「戻る」などの操作ができなくなります。
そのため、タップした時に、アプリ内の専用ブラウザを開くか、スマートフォンのブラウザアプリを起動させて指定した外部サイトを開きたいと思っております。
どのように記述すればよいかご教授いただけませんでしょうか。
宜しくお願い致します。
<ons-tab>
のクリックイベントを拾ってその中でwindow.open()
してはどうでしょうか。
下記の例ではwindow.open()
する代わりにalert()
しています。
当該タブをアクティブにしたくないという場合はtabbarのイベントをキャンセルしてください。
ons.bootstrap()
.controller("TabbarController", function($scope) {
this.openWindow = function() {
alert("clicked!");
// window.open('http://ja.stackoverflow.com', '_blank');
};
// タブをアクティブにしたくない場合
$scope.$evalAsync(function() {
$scope.tabbar.on('prechange', function(e) {
if (e.index === 2) {
e.cancel();
}
});
});
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/onsenui.min.js"></script>
<ons-tabbar var="tabbar" ng-controller="TabbarController as ctrl">
<ons-tab icon="home" label="home" page="home.html" active="true"></ons-tab>
<ons-tab icon="gear" label="settings" page="settings.html"></ons-tab>
<ons-tab icon="external-link" label="link" ng-click="ctrl.openWindow()"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<h1>Home</h1>
</ons-template>
<ons-template id="settings.html">
<h1>Settings</h1>
</ons-template>