2015-10-16 47 views
0

我需要在離子應用程序中包裝一個URL。 我使用windows 8進行測試,在鉻合金內部進行測試。Ionic和InAppBrowser不能工作

結果: 在Windows上Chrome瀏覽器:重定向到瀏覽器內頁面 在Android手機上:關閉應用程序,沒有任何警告或控制檯中的其他內容。

請給我一個解決方案,我需要什麼,而不使用iframe。

我跟每一個文檔給我的所有的信息,這是怎麼實現它:

app.js文件

// Ionic Starter App 
 

 
// angular.module is a global place for creating, registering and retrieving Angular modules 
 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
 
// the 2nd parameter is an array of 'requires' 
 
angular.module('starter', ['ionic','ngCordova']) 
 

 
.run(function($ionicPlatform) { 
 
    $ionicPlatform.ready(function() { 
 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
 
    // for form inputs) 
 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
 
    } 
 

 
    if(window.StatusBar) { 
 
     StatusBar.styleDefault(); 
 
    } 
 
    }); 
 
}) 
 

 
.controller('CheckController', function($scope, $cordovaInAppBrowser) { 
 
     if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { 
 
      document.addEventListener("deviceready", onDeviceReady, false); 
 
     } else { 
 
      onDeviceReady(); 
 
     } 
 

 

 

 
    function onDeviceReady() { 
 
     
 

 
     window.open = $cordovaInAppBrowser.open('http://apache.org', '_self', { 
 
      location: 'no', 
 
      hidden:'yes' 
 
     }).then(function (event) { 
 
      alert('success'); 
 
     }) 
 
     .catch(function (event) { 
 
      console.log(event); 
 
     }); 
 
    } 
 
});
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 

 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 

 
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
 
    <link href="css/ionic.app.css" rel="stylesheet"> 
 
    --> 
 

 
    <!-- ionic/angularjs js --> 
 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
 

 
    <!-- cordova script (this will be a 404 during development) --> 
 
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script> 
 
    <script src="cordova.js"></script> 
 

 
    <!-- your app's js --> 
 
    <script src="js/app.js"></script> 
 
    </head> 
 
    <body ng-app="starter"> 
 

 
    <ion-pane> 
 
     <ion-header-bar class="bar-stable"> 
 
      <h1 class="title">Lunch External App Demo</h1> 
 
     </ion-header-bar> 
 
     <ion-content ng-controller="CheckController"> 
 
      <div id="map" data-tap-disabled="true"></div> 
 

 
     </ion-content> 
 
    </ion-pane> 
 

 
    </body> 
 
</html>

回答

0

這是工作在Android上:

ionic.Platform.ready(function(){ 
 
      // will execute when device is ready, or immediately if the device is already ready. 
 
      onDeviceReady3(); 
 
     }); 
 

 
function onDeviceReady3(){ 
 
      var options = { 
 
       location: 'no', 
 
       clearcache: 'no', 
 
       toolbar: 'yes', //only for IOS 
 
       hidden:'yes' 
 
      }; 
 
       
 
       $cordovaInAppBrowser.open('http://google.com', '_self', options) 
 
        .then(function(event) { 
 
         // success 
 
         alert("success"); 
 
        }) 
 
        .catch(function(event) { 
 
         // error 
 
         alert("error"); 
 
        }); 
 
       $cordovaInAppBrowser.close(); 
 
     }

相關問題