-1

お世話になります。

ons-tabbar-itemのpage属性に外部サイトのURLを記述すると、アプリの中で開くため、
「戻る」などの操作ができなくなります。

そのため、タップした時に、アプリ内の専用ブラウザを開くか、スマートフォンのブラウザアプリを起動させて指定した外部サイトを開きたいと思っております。

どのように記述すればよいかご教授いただけませんでしょうか。

宜しくお願い致します。

1
  • 開発環境や動作環境、関連するタグを明確に記載しましょう。
    – otak-lab
    Commented 2016年4月17日 11:59

1 件の回答 1

1

<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>

2
  • cither様 ご回答いただきまして誠にありがとうございました! 教えていただいた内容でいろいろ試し、解決致しました。
    – tommy
    Commented 2016年4月27日 4:40
  • @tommy 解決したようでしたら、この質問が解決済みであることを示すためにぜひ回答の承認をお願いします。
    – cither
    Commented 2016年4月27日 4:45

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。