[Onsen UI 1.x] Onsen ui and InAppBrowser



  • I’m getting content from a web service and within the content it contain links that I need them to open in a external windon and back to my application. How can I do this? I need code example that works please.



  • There’s many ways, but i’ll show you one if i understood well.
    If you want link for another page

    <ons-list-item modifier="chevron" class="item" onclick="location.href = 'search.html'">
    

    Or a calling from a file
    App.js

    (function(){
      'use strict';
      var module = angular.module('app', ['onsen']);
    
    
      module.controller('DetailController', function($scope, $data) {
        $scope.item = $data.selectedItem;
      });
    
      module.controller('MasterController', function($scope, $data) {
        $scope.items = $data.items;
    
        $scope.showDetail = function(index) {
          var selectedItem = $data.items[index];
          $data.selectedItem = selectedItem;
          $scope.navi.pushPage('detail.html', {title : selectedItem.title});
        };
      });
      
        module.factory('$data', function() {
        
    
          data.items = [
              {
                  Image: '1443923568_male3.png',
                  title: 'New ',
                  label: 'Party',
                  desc: 'Invite new friends.',
                  mmyurl: 'party.html'
              },
              {   Image: '1443923589_icon-40-clipboard-list.png',
                  title: 'List ',
                  label: 'Help',
                  desc: 'Follow the tips',
                   mmyurl: 'help.html'
              }
          ];
    
          return data;
      });
      var data = {};
          var app = angular.module('myApp',['onsen']);
          
       module.controller('myCtrl',function($window, $scope){
           $scope.myFunction = function(item){
                var url = String(window.location);
                url = url.substr(0, String($window.location.href).indexOf("www") + 4);
                $window.location.href =  url + item.mmyurl;
    
           }
     });
      
    
    })();
    

    html code - resume

    <ons-page>
                <ons-toolbar>
                    <div class="center">Application Model</div>
                </ons-toolbar>
    
                <ons-list ng-controller="MasterController">
                    <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
                        <ons-row>
                            <ons-col width="60px">
                                <div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>
                                
                            </ons-col>
                            <ons-col>
                                <header>
                                    <span class="item-title">{{item.title}}</span>
                                    <span class="item-label">{{item.label}}</span>
                                </header>
                                <p class="item-desc">{{item.desc}}</p>
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-navigator>
    
        <ons-template id="detail.html">
            <ons-page ng-controller="DetailController">
    
                <ons-toolbar>
                    <div class="left"><ons-back-button>Back</ons-back-button></div>
                    <div class="center">Details</div>
                </ons-toolbar>
    
                <ons-list modifier="inset" style="margin-top: 10px">
                    <ons-list-item class="item">
                        <ons-row>
                            <ons-col width="60px">
                                <div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>
                            </ons-col>
                            <ons-col>
                                <header>
                                    <span class="item-title">{{item.title}}</span>
                                    <span class="item-label">{{item.label}}</span>
                                </header>
                                <p class="item-desc">{{item.desc}}</p>
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                   <div ng-controller="myCtrl">
                   
                   <ons-list-item modifier="chevron" ng-click= "myFunction(item)">
          <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
          Browser for the next page loaded by the control. "External page"
    </ons-list-item>
                    
                    </div>
                </ons-list>
    


  • Perhaps you need to see:

    https://github.com/apache/cordova-plugin-inappbrowser

    var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
    


  • Thanks for the reply, after opening in a new window I can’t go back to my application, I want to know how can I use the inappbrowser plugin to go back?

    <div class="data">
                {{event.links}}// How can I open it in InAppBrowser plugin?
      </div>
    


  • I solved with this code:

    document.onclick = function (e) {
            e = e ||  window.event;
            var element = e.target || e.srcElement;
     
            if (element.tagName == 'A') {
                window.open(element.href, "_blank", "location=yes");
                return false;
            }
        };
    

    Thanks for your help.



  • Very well , congratulations!



  • @magestik This worked for me as well!


Log in to reply