

お世話になります。

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

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

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

宜しくお願い致します。


CC BY-SA 3.0
2016-04-17T09:26:09.613
24090
2016-04-20T14:40:37.663
2016-04-20T14:40:37.663
8532
15189
question
onsen-ui cordova
ons-tabbar-itemを使って外部サイトを開きたい


`<ons-tab>`のクリックイベントを拾ってその中で`window.open()`してはどうでしょうか。  
下記の例では`window.open()`する代わりに`alert()`しています。  
当該タブをアクティブにしたくないという場合はtabbarのイベントをキャンセルしてください。

[code]

    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();
          }
        });
      });
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-04-20T14:29:57.630
24189
2016-04-20T14:29:57.630
8532
24090
answer