H5与安卓、IOS的交互,判断微信、移动设备、安卓、ios
一、通过用户代理可以判断网页当前所在的环境
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE
presto: u.indexOf('Presto') > -1, //opera
webKit: u.indexOf('AppleWebKit') > -1, //webkit
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //firefox
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //mobile
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android or uc
iPhone: u.indexOf('iPhone') > -1 , //iPhone QQHD
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') == -1
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
function iOS7() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
var vers = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
if(vers[0] >=7)
return true;
return false;
}
return false;
}
H5与IOS的交互(javascriptBrige)
if(browser.versions.ios){
//js必写
var connectWebViewJavascriptBridge = function(callback){
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
} if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) };
connectWebViewJavascriptBridge(function(bridge){
bridge.registerHandler("ToAppPayCallback", function(data, responseCallback) {
// alert("原生返回结果"+data.appPayResult);
$(".loading").css("display","none");
if(data.appPayResult){
window.location.href="./V1/pay/index.html?orderID="+orderID;
}else{
makeToast("支付失败");
}
//alert("H5注册的方法,原生执行");
//alert("原生返回的结果为"+data.appPayResult);
//alert(data);
//alert(responseCallback);
});
submitOrder();
})
function submitOrder(){
if(appPay){
var params = {orderID:orderID,payWay:payWay};
// Log.log("try to call ios native to add image");
if (window.WebViewJavascriptBridge) {
WebViewJavascriptBridge.callHandler('ToAppPay', params, function (response) {
// Log.log("call native to upload image");
// alert(response); /* if(response)*/
});
}
}
}
}
H5与安卓做交互(通过拦吐司事件完成交互)
if(browser.versions.android ){
//安卓的回调
//var params = {orderID:orderID,payWay:payWay};
var androidPayWay=$(".payWay").find("input:radio:checked").val();
// alert(androidPayWay);
if(androidPayWay==1){
mAndroid.showToastWithParams(1,orderID); //通过定义安卓的吐司传给安卓两个或者多个值
}else if(androidPayWay==2){
mAndroid.showToastWithParams(2,orderID);
}
}
//安卓的回调(安卓通过拦截,监听到事件之后,可以执行js在全局下定义的函数)
function getAndroidResult(result,curOrderId){ //传入的两个值,为安卓的返回
if(result==1){
// window.location.href="./V1/pay/index.html?orderID="+curOrderId;
window.location.href="./mySignUp.html";
}else if(result==2){
makeToast("支付失败");
// $(".payWayBtns").css("display","none");
window.location.reload(); }
}
名词解释
Navigator对象主要是包含有关客户端浏览器的一些信息,Navigator对象是由JavaScript runtime engine自动创建的,但是目前没有针对于navigator对象的公开标
准,不过目前所有浏览器都支持该对象。
Navigator目前主要用于区分安卓、ios、微信等
userAgent属性是一个只读的字符串,申明浏览器用于HTPP请求的用户代理头的值,简单点说其实就是通过UserAgent可以取得浏览器类别、版本,客户端操作系统等信息
//判断浏览器的版本 判断是否是微信浏览器
function is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
} //判断是否为移动设备
function isMobile(){
if(/android/i.test(navigator.userAgent)){
//document.write("This is Android'browser.");//这是Android平台下浏览器
return true;
}
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
//document.write("This is iOS'browser.");//这是iOS平台下浏览器
return true;
}
if(/Linux/i.test(navigator.userAgent)){
//document.write("This is Linux'browser.");//这是Linux平台下浏览器
return true;
}
if(/Linux/i.test(navigator.platform)){
//document.write("This is Linux operating system.");//这是Linux操作系统平台
return true;
}
if(/MicroMessenger/i.test(navigator.userAgent)){
//document.write("This is MicroMessenger'browser.");//这是微信平台下浏览器
return true;
}
return false;
}
H5与安卓、IOS的交互,判断微信、移动设备、安卓、ios的更多相关文章
- IOS请求H5页面、要求自定义agent判断是电脑、安卓还是iPhone登录
//自定制的userAgent- (void)createMyAgent{ NSString *userAgent = [[[UIWebView alloc]init]stringByE ...
- js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用 上传图片:wx.uploadImage. 2.上传图片的时候 ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- 微信5.4安卓版重回ios风格 导航菜单都放底栏位置
微信5.4安卓版发布更新了,由于本人的手机设置软件自动更新,中午的时候才发现微信换成了5.4版本,启动微信后是一个大大的“转账,就是发消息”,进入微信界面有点小惊喜,导航菜单都改为底部tab方式,顶部 ...
- 微信下输入法在IOS和安卓下的诡异
1.验证window.innerHeight 系统版本 iOS9.1.1 安卓4.4.4 没有输入法的情况下 504 567 有输入法的情况下 208 273 看来两者的window.innerHei ...
- 通过浏览器navigator判断浏览器版本或者手机类型&&判断微信访问
javascript 的navigator属性,不常用,但是用处也不少,主要用处是在做浏览器兼容的问题的时候,现在有的网站已经不兼容IE6,用户假如用IE6浏览网页的话,会提示浏览器升级等信息.或者判 ...
- 微信团队分享:iOS版微信是如何防止特殊字符导致的炸群、APP崩溃的?
本文来自微信开发团队yanyang的技术分享. 1.引言 相信大家都遇到过一段特殊文本可以让iOS设备所有app闪退的经历.前段时间大年初一,又出现某个印度语字符引起iOS11系统奔溃,所幸iOS版微 ...
- js判断手机端操作系统(Andorid/IOS)
非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...
- 微信团队分享:iOS版微信的高性能通用key-value组件技术实践
本文来自微信开发团队guoling的技术分享. 1.前言 本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称 ...
随机推荐
- GreenPlum 大数据平台--安装
1. 环境准备 01, 安装包准备: Greenplum : >>>>链接地址 Pgadmin客户端 : >>>链接地址 greenplum-cc-web ...
- Tomcat服务器安装
Tomcat服务器类似于XAMPP,主要安装步骤如下. 第一步: 安装JDK. 第二步: 安装tomcat. 第三步: 启动tomcat下bin下的startup.bat即可启动tomcat. 可能出 ...
- sudo apt-get install openssh-server时提示需要安装1:6.6p1-2ubuntu1的解决办法(图文详解)
最近,在执行 sudo apt-get install openssh-server 提示,如下. 解决办法 先要执行 sudo apt-get install openssh-client=1:6. ...
- 阻止事件的默认行为,例如click <a>后的跳转~
在W3C中,使用preventDefault()方法: 在IE中,使用window.event.returnValue = false.
- [转]浅谈微信小程序
本文转自:http://www.cnblogs.com/liziyou/p/6340159.html 微信小程序 1.什么是小程序 小程序是指微信公众号平台小程序,小程序可以在微信内被便捷的获取和转播 ...
- 在 Azure 中创建静态 HTML Web 应用
Azure Web 应用提供高度可缩放.自修补的 Web 托管服务. 本快速入门教程演示如何将基本 HTML+CSS 站点部署到 Azure Web 应用. 使用 Azure CLI 创建 Web 应 ...
- 1.net平台
.net/dotnet:一般指的是.Net Framework框架,是一种平台,一种技术. .net Framewoek框架是.net平台不可缺少的一部分,它提供了一个稳定的运行环境来保证.net ...
- Colorbox - a jQuery lightbox
http://www.jacklmoore.com/colorbox/http://www.jacklmoore.com/colorbox/example5/ <script type=&quo ...
- 清除canvas画布内容--点擦除+线擦除
清空canvas画布内容 1.重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...
- html5 填表 表单 form label input button legend fieldset
<form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...