zoukankan      html  css  js  c++  java
  • iframe

    首先使用$ionicModal创建一个弹出层可以覆盖整个页面,具体就看大家的业务需求了
    在modal中加入如下的代码:

    <ion-modal-view>
      <!-- 头部 -->
      <ion-header-bar align-title="center" class="bar-positive">
        <div class="buttons">
          <button ng-click="vm.cancelPay()" class="button button-clear button-icon icon ion-ios-arrow-back"></button>
        </div>
        <h1 class="title">支付宝</h1>
      </ion-header-bar>
      <!-- 内容部分 -->
      <ion-content scroll="true" class="has-header no-padding">
        <iframe data-tap-disabled="true" ng-src="{{vm.paySrc}}"></iframe>
      </ion-content>
    </ion-modal-view>

    注意下我们需要配置ion-content的scroll=”true” class=”has-header no-padding” 和iframe的data-tap-disabled=”true”
    这里就是可以解决用户不能操作iframe里面的东西

    其中如果想要动态的改变iframe的src一定要用ng-src=”{{vm.paySrc}}”但是这里就需要注意了,如果你的vm.paySrc是普通的链接是不能访问的,因为AngularJS 中防止了
    用户注入URL,所以解决办法是使用 $sce.trustAsResourceUrl(URL)

    vm.paySrc = $sce.trustAsResourceUrl('http://www.baidu.com/'); //URL 为全链接($sce.trustAsResourceUrl("http://" + url))

    最后就是添加css了:

    .scroll-content > .scroll {
      height: 100%;
    }
    .scroll-content > .scroll > iframe {
      min- 100%;
      min-height: 100%;
    }

    注:

    <iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0" style="200px; height:150px; "></iframe>
    <a href="../ashx/Print2DCodeImage.ashx?codeInfo=Demo123" target="myFrameName" >名字</a> 

    上面的这个a标签的target指向的是name为myFrameName的iframe,不是用Id来做指向的目标,如果target=“myFrameId”的话只有新版的Chrome、opera支持,在IE10,FF中都不生效。

  • 相关阅读:
    延迟加载时发生no session错误的解决办法
    零零散散的一些知识点(一)
    零零散散的一些知识点(二)
    自己写的一个日历表
    js复制网址
    load方法在延迟加载时可能出现的错误。
    JSON基本介绍
    JBOSS4.0 JDBC数据源配置大全
    EJB学习笔记一
    Android程序完全退出的方法
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6341510.html
Copyright © 2011-2022 走看看