zoukankan      html  css  js  c++  java
  • 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- 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,然后设置信任的网址即可。

  • 相关阅读:
    image对象
    Frame/IFrame 对象
    Form 对象
    JavaScript 对象 实例
    button对象
    正则介绍以及多种使用方法
    js /jquery停止事件冒泡和阻止浏览器默认事件
    一些兼容性的知识
    面试题总结
    事件
  • 原文地址:https://www.cnblogs.com/zry2510/p/6082655.html
Copyright © 2011-2022 走看看