首页 > 代码库 > Ionic跳转到外网地址

Ionic跳转到外网地址

1.安装插件

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

执行命令:
cordova plugin add org.apache.cordova.inappbrowser

采用命令查看:
cordova plugin ls

2.简单代码

$scope.godetail=function(unit){      var options = {        location: ‘yes‘,        clearcache: ‘yes‘,        toolbar: ‘no‘      };      var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;      if(reg.test(unit.DetailAddr)){        $cordovaInAppBrowser.open(unit.DetailAddr, ‘_blank‘, options)          .then(function(event) {            // success          })          .catch(function(event) {            // error          });        //$cordovaInAppBrowser.close();      }      else{        $ionicLoading.show({          noBackdrop: true,          template: "地址错误",          duration: 1500        });      }    }
$rootScope.$on(‘$cordovaInAppBrowser:loadstart‘, function(e, event){
alert("I安装中了");
});
  <div class="card">      <div class="item">        <strong>{{HelpProc.RescueModel.UnitName}}&nbsp;<label class="price">¥{{HelpProc.RescueModel.Amount}}</label></strong>        <div class="item" ng-repeat="unit in HelpProc.RescueModel.ListRescue" ng-click="godetail(unit)">          <span > {{unit.UnitName}}</span>          <div class="clearfix"></div>          <p class="align_right "><label class="labgreen">¥{{unit.Amount}} &nbsp;{{unit.DtTime}}</label></p>        </div>      </div>    </div>

3.效果图

 

参考地址:

http://www.ionic-china.com/doc/ngCordova/In%20App%20Browser.html

http://cordova.apache.org/docs/en/3.3.0/cordova/inappbrowser/inappbrowser.html

 

 

 

Ionic跳转到外网地址