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