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，然后設置信任的網址即可。