I want to open an external site using ons-tabbar-item.

Thank you for your help.

If you write the URL of an external site in the page attribute of ons-tabbar-item, it opens in the app, so
You will no longer be able to "go back" and so on.

Therefore, when I tap, I would like to open a dedicated browser in the app or open a designated external site by launching a browser application on my smartphone.

Could you tell me how to describe it?

Thank you for your cooperation.

onsen-ui cordova

2022-09-29 21:51

1 Answers

Why don't you pick up the <ons-tab> click event and do window.open() in it?
In the example below, instead of window.open(), alert().
If you do not want the tab to be activated, cancel the tabbar event.

ons.bootstrap()
.controller("TabbarController", function($scope){
  This.openWindow=function(){
    alert("clicked!");
//    window.open('http://ja.stackoverflow.com','_blank');
  };
  
  // If you do not want the tab to be active
  $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-tabicon="home" label="home" page="home.html" active="true">/ons-tab>
  <ons-tabicon="gear" label="settings" page="settings.html">/ons-tab>
  <ons-tabicon="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>

2022-09-29 21:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656