[Onsen UI 1.x] Onsen ui and InAppBrowser

[magestik]

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.

[Leonardo Augusto]

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>

[Leonardo Augusto]

Perhaps you need to see:

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

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

[magestik]

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>

[magestik]

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.

[Leonardo Augusto]

Very well , congratulations!

[scramlo]

@magestik This worked for me as well!