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-width: 100%;
  min-height: 100%;
}

注:

<iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0" style="width: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中都不生效。

posted @ 2017-01-22 22:08  每天都要进步一点点  阅读(968)  评论(0编辑  收藏  举报