data-tap-disabled=true解决鼠标单击右键变左键（转）

标签：

1. 在开发一款机票砍价的ionic app中用户可以选择去携程订票,这个时候问题来了因为我监听了android的back的事件,而且这个事件是cordovaJS调用了原生的事件来进行处理的.代码如下:

javascript$ionicPlatform.registerBackButtonAction(function (e) {
e.preventDefault();
......
......
 return false;
}, 101);

但是当我跳转到携程的时候,这个监听函数是不会起作用的,所以我就凌乱........,当用户要返回到我的App时要不停的按手机的返回键,这个时候就相对于浏览器的后退一样了,这个时候就会出现一个不好的表现了,回退的功能会把你浏览过的route全部重新访问一边之后才会退出我们的应用,如果没有使用上面的registerBackButtonAction的话,这是在android上,至少是可以回退,但是在ios上呢?这个就会很逆天了,会被别人骂的要死...... 2. 另一个问题是:用户支付的时候,我们为了方便使用了网页版的支付方式,同样的问题同样的味道,虽然可以自己写cordva的插件.但是毕竟这个还是比较费时间的,如果小伙伴需要这样的功能我推荐大家用这个: https://github.com/TongChia/cordova-plugin-pingpp

最后的最后实在是没办法了...... 想到了用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%;
}

 原地址：http://www.thinksaas.cn/group/topic/379031/

data-tap-disabled=true解决鼠标单击右键变左键（转）

标签：

原文地址：http://www.cnblogs.com/1992825-Amelia/p/4821134.html