ionic 使用 iframe 标签封装 Web App 时的一些技巧

十年热恋 提交于 2019-12-02 06:43:54

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

1、使用 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%,这样才可以全屏

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

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,然后设置信任的网址即可。

3、其实还可以使用 cordova-plugin-whitelist 进行设置

在项目根目录下的config.xml中添加 access 控制

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

<!-- Don't block any requests -->
<access origin="*" />
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!