Ionic跳转到外网地址

Posted 2020-08-14 sulin

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