码迷,mamicode.com
首页 > 其他好文 > 详细

iframe

时间:2017-01-22 22:41:16      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:lin   view   iframe   ashx   dal   dem   click   css   code   

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

iframe

标签:lin   view   iframe   ashx   dal   dem   click   css   code   

原文地址:http://www.cnblogs.com/crazycode2/p/6341510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!