ionic 使用 iframe 標籤封裝 Web App 時的一些技巧

使用 ionic 的 iframe 封裝 web App 時可能會遇到沒法全屏，頁面連接沒法點擊等問題，這裏展現下如何解決此問題

一、使用 ion-content 標籤封裝 iframe 標籤

<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-content 要設爲 scroll="true" overflow-scroll="true"

  iframe 要設爲 class="width-100 height-100" 同時還要設置 min-width 和 min-height 爲 100%，這樣才能夠全屏

二、在頁面對應的控制器中設定信任的安全鏈接

angular.module("start.controllers", [])
.controller('IndexCtrl', function($scope, $http, $sce) {
    var url = "http://m.yoururl.com";
    $scope.myURL = $sce.trustAsResourceUrl(url);
});

在 ionic 的 controllers 模塊中找到對應的頁面控制器，這裏我是用的是 IndexCtrl，引入 $sce，而後設置信任的網址便可。

三、其實還能夠使用 cordova-plugin-whitelist 進行設置

在項目根目錄下的config.xml中添加 access 控制

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

<!-- Don't block any requests -->
<access origin="*" />