使用iframe从网页调起移动端应用
2015-08-03 23:26
344 查看
比如想在网页中调起支付宝,我们可以创建一个iframe,src为:
alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}
浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了:
alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二维码扫描的url}
浏览器接收到这个url请求发现未知协议,会交给系统处理,系统就能调起支付宝客户端了。我们还能趁机检查一下用户是否安装客户端:给iframe设置一个3-5秒的css3的transition过渡动画,然后监听动画完成事件,如果用户安装了客户端,那么系统会调起,并将浏览器转入后台运行,进入后台的浏览器一般不会再执行css动画,这样,我们就能通过判断css动画执行的时长是否超过预设来判断用户是否安装某个客户端了:
/** * 调起客户端 * @param url {String} * @param onSuccess {Function} * @param onFail {Function} */ module.exports = function(url, onSuccess, onFail){ // 记录起始时间 var last = Date.now(); // 创建一个iframe var ifr = document.createElement('IFRAME'); ifr.src = url; // 飘出屏幕外 ifr.style.position = 'absolute'; ifr.style.left = '-1000px'; ifr.style.top = '-1000px'; ifr.style.width = '1px'; ifr.style.height = '1px'; // 设置一个4秒的动画用于检查客户端是否被调起 ifr.style.webkitTransition = 'all 4s'; document.body.appendChild(ifr); setTimeout(function(){ // 监听动画完成时间 ifr.addEventListener('webkitTransitionEnd', function(){ document.body.removeChild(ifr); if(Date.now() - last < 6000){ // 如果动画执行时间在预设范围内,就认为没有调起客户端 if(typeof onFail === 'function'){ onFail(); } } else if(typeof onSuccess === 'function') { // 动画执行超过预设范围,认为调起成功 onSuccess(); } }, false); // 启动动画 ifr.style.left = '-10px'; }, 0); };
相关文章推荐
- iOS开发-17.触摸事件示例
- Android 02:Android中Adapter用法总结
- Unity四种路径总结
- Android用Path类绘制路径
- [Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法
- Android绘图Canvas、Paint类基本用法
- 关闭Android 应用的三种方法
- Android 实例:通过自定义View组件实现跟随手指移动的小兔子
- Android Hotpatch系列之-项目介绍
- 高级ios工程师和初级工程师的区别
- Android推送 百度云推送 入门篇
- Android基础之Activity四种启动模式和task相关
- Android真机获取root权限,进入data目录
- iOS basic
- cocos2d-x ClippingNode
- ios6与iOS7 的图片适配
- [IOS]textField被虚拟键盘挡住解决方法
- [ios] Xcode shortcuts
- android动态添加view
- Android 中Junit 测试框架(单元测试)