ionic使用iframe范围外部站点

使用 ionic 的 iframe 封装 web App 时可能会遇到无法全屏，页面链接无法点击等问题，这里展示下如何解决此问题

1、使用 ion-content 标签封装 iframe 标签

<ion-view view-title="demo">
  <ion-content scroll="true" overflow-scroll="true">
      <iframe ng-src='{{myUrl}}' class="width-100 height-100" style="min-width: 100%; min-height: 100%;" >
      </iframe>
  </ion-content>
</ion-view>

 

  ion-content 要设为 scroll="true" overflow-scroll="true"

  iframe 要设为 class="width-100 height-100" 同时还要设置 min-width 和 min-height 为 100%，这样才可以全屏

2、在页面对应的控制器中设定信任的安全连接

angular.module('starter')
.controller('Demo', function($scope,$http,$sce) {
    var url = "http://211.144.122.21:1080/NopCommerce";
    $scope.myUrl=$sce.trustAsResourceUrl(url);
    
    
});

 

在 ionic 的 controllers 模块中找到对应的页面控制器，这里我是用的是 IndexCtrl，引入 $sce，然后设置信任的网址即可。