首先使用$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中都不生效。