摘要：在中巧用解决跳转到第三方平台时不能回调的问题比如支付在开发中遇到不少的坑，绝大部分解决了但是在我们的中如果跳转到第三方网站上时，那么问题来了此时我们的是不能监听到你在其它网站上的事件的，所以当你想要回退到我们自己上时请紧握你的蛋小编在开发这
在ionic中巧用iframe解决跳转到第三方平台时不能回调的问题－比如支付
在ionic开发中遇到不少的坑，绝大部分解决了但是在我们的app中如果跳转到第三方网站上时，那么问题来了．此时我们的app是不能监听到你在其它网站上的事件的，所以当你想要回退到我们自己app上时,请紧握你的蛋,小编在开发这个模块时就遇到了很大的麻烦想尽各种办法还是不能解决,下面我就跟大家讨论下我在ionic中遇到的问题:
在开发一款机票砍价的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-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%;
}
好了基本上就是这样了其它的细节大家去优化吧!这里是参考的资料:
https://github.com/driftyco/ionic/issues/1151
http://forum.ionicframework.com/t/fill-content-container/605
http://www.erpchn.com/diannao/43242.html
http://www.thinksaas.cn/group/topic/350702/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85796.html
摘要：为什么要在线打包本身是基于，的打包又依赖于等等。在编译环境配置的道路上一路填坑屡战屡败之后，遂寻求其他出路。国内的跨平台开发解决方案等都提供云端打包的服务，不用配置本地编译环境，就了一下是否有提供云打包的服务。 为什么要在线打包 Ionic本身是基于Cordova，Cordova的app打包又依赖于XCODE、ANDROID SDK、Gradle、Maven等等。在Android编译环...
摘要：迁移概念是基于之上重写的全新框架。从迁移虽然应用需要对其语法结构进行更新，但是开发人员仍然可以通过和这两篇文章来积极的确保升级工作符合最佳的应用实践。这可以很容易的让一个的控制器迁移为一个的类。 迁移概念 Ionic 2 是基于 Angular 2 之上重写的全新框架。所有你已知的关于的 Angular 的部分仍然存在，但是也有一些作为开发人员仍要了解的新的语法和结构性变化。关于 An...
摘要：目前，旅途云公司研发以及运营云服务基础设施服务平台，面向全球客户提供基于云计算的解决方案与客户服务，拥有丰富的国内双线高防香港等优质的资源。 一年一度的双十一电商大促已经开始，部分IDC商家也发布了自己的特别产品或者优惠方案，部落陆续收到一些商家邮件，部分是首次出现在这里，为了方便大家查阅，所以做个汇总信息，大部分信息源于商家自述，读者请自行甄别，排名不分先后，以邮件顺序，后续如有增...
摘要：抽时间写了个，你想要的都在这里了。你可以狠狠的点击下面的链接去往仓库地址，一探究竟。你可以直接下来，直接运行。 ionic2实现透明状态栏和透明工具栏 目录 如何实现？ 集成DEMO（2017/4/1更新） 简短的分析 一个额外的小栗子 我想让状态栏变色怎么办？ 为什么这么做？ 总结 以下是我的方案，不绕弯子，直接上实现过程．首先贴效果图，来张gif（2017/4/1更新）show...
摘要：点击进入旅途云商家官方网站旅途云国内高防国内高防套餐虚拟架构，免费安装系统，全部为不限流量套餐。旅途云怎么样?今天收到一个叫旅途云的商家给本站投稿，商家在自述中介绍是成立于2007年的商家，不过站长查了一下他家的域名，去年注册的，不知道这期间是否有更换过域名，旅途云商家主要销售国内的VPS，主打高防，四川雅安和四川宿迁机房都带100G的防护，配置给的也比较高，从目前看性价比还是不错的，不过国...
阅读 910·2021-10-11 10:58
阅读 3622·2021-08-11 11:16
阅读 1470·2019-08-30 15:44
阅读 1898·2019-08-29 18:45
阅读 2116·2019-08-26 18:18
阅读 810·2019-08-26 13:37
阅读 1444·2019-08-26 11:43
阅读 1977·2019-08-26 11:34
