1.web扫码登录怎么实现,思路
步骤 WEB平台 手机
第1步 生成二维码
第2步 (ajax监控后台) 扫码
第3步 (ajax监控后台) 确定(后台异步通知WEB平台)
第4步 AJAX发现状态改变,登陆成功
ajax监控后台的流程:生成二维码后
setTimeout(function(){
//AJAX请求,检测状态
},5000);
整体思路:
- 前端调用后台生成二维码的API,获取到二维码图片和所包含的信息(通常是一个唯一ID)
- 前端检测(通过轮询或者websock,自己选择)是否有手机扫码,通过调用后台接口API,参数为上面的唯一ID
- 手机扫描二维码登陆,手机端可以获取到二维码里的信息ID,带上当前登陆用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数据,加上登录用户信息,当前台调用API时,给返回登录成功。
- 前端获取到登录成功,进行跳转
微信与支付宝的扫码登录是有一些区别的,微信目前是一个持续27s的长连接请求;而支付宝是持续循环的短连接请求。其实原理是一样的。
首先,前端调用二维码接口,获取图片二维码以及用户唯一表示uid,然后与服务器建立长连接请求,询问是否有用户扫码登录。
用户用APP扫码之后,会请求服务器接口,将用户信息与二维码的uid绑定,前端的长连接就可以请求到当前uid对应的用户,从而进行登录操作。
前端的长连接请求类似以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div id="divCon">
<img src="" id="QrCodeImg" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var uuid = 131422035;
function validateLogin(){
$.get("/walletadminV2/api/testServlet/testLogin?uuid=" + uuid , function(data, status) {
if(data == ""){
validateLogin();
}else{
var obj = eval("(" + data + ")");
alert("登录成功了:" + obj.uname);
}
});
}
validateLogin();
});
</script>
</html>
问题地址:web扫码登录怎么实现,求个思路
2.解决input[type=file]打开时慢、卡顿问题
为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*
",打开本地文件夹的速度特别慢?
经过测试发现,在mac
里面safari、Firefox、Chrome(opera不知道为啥老闪退)
都没有卡顿问题
在windows里面,Firefox
不卡顿,只有Chrome
卡顿。
于是我决定先去掉accpet试试……
果然就没有了卡顿的问题。
那么本包在试试accpet="image/jpg"果然也不卡卡的了!!
看来问题的所在就是"image/*
"
但是写accpet
的原意是要想要筛选出所有图片_(:з」∠)_
那么为了实现这个需求,同时提高用户体验,只能采取枚举了
修改后的代码
<input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>
再试试,果然妥妥的了!
原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件,
如果网络连接到google的速度比较快呢,就没有什么问题。
但是如果连接比较慢,或者干脆跪掉了,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时
使用accept="image/png, image/jpeg, image/gif
"就可以解决这个问题,因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。
但是如果用像是accept="image/*
"这样的呢,就不行了,就有可能变得卡卡的。
3.浏览器拦截跨域请求处理方法
解决跨域的解决办法有多种,比如jsonp
,或者apache
或者nigix
里面配置,或者后端的php或者java中配置 cross orgion
。
在网上搜了一圈,发现处理方式都差不多,但是我们得清楚这些到底怎么用。
先看下这段代码:
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
这段代码作用是啥,其实这个是解决flash跨域的解决办法。
看淘宝的使用方式:
https://www.taobao.com/crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="*.taobao.com" />
<allow-access-from domain="*.taobao.net" />
<allow-access-from domain="*.taobaocdn.com" />
<allow-access-from domain="*.allyes.com" />
</cross-domain-policy>
一般crossdomain.xml
的位置是放到项目的根目录下。
下面举例关于字体跨域的解决方法:
直接了当了说,解决此类问题,最直接的方法就是,就是给被请求的服务器,添加HTTP头响应头,这里提供两种添加HTTP头的方法:
第一种,就是在程序中添加HTTP头:
如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
'Access-Control-Allow-Origin': '*',
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
添加此段代码的目的很简单,也就是告诉浏览器,这个资源是运行远程所有域名访问的。当然,此处的也可以替换为指定的域名,出于安全考虑,建议将替换成指定的域名。
第二种,就是在服务器上,添加HTTP响应头。在这里,我们就以IIS6.0为例:
在被请求的网站上,设置HTTP头,添加“
//在被请求的网站上,设置HTTP头,添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。
第三种,使用JSONP格式,即在jQuery中ajax请求参数dataType:'JSONP':
<script>
$.ajax({
url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
dataType:'JSONP', // 处理Ajax跨域问题
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
当然请求方式只能是get。
参考地址:
关于跨域策略文件crossdomain.xml文件
浏览器拦截跨域请求处理方法(同源策略不允许读取XXX上的远程资源)
4.Ajax访问后端的时候,只有IE报400错误解决办法
在请求的时候,一般在url后面都会添加一个时间戳,比如:
url:"/order/order.shtml?time="+new Date()
但是IE11
却不进入这个ajax
请求,在网上查了下,说IE不支持时间对象作为参数。
于是我改了一下:
url:"/order/order.shtml?time="+new Date().getTime()
5.html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下无效?
如题所示:
<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加红显示不了p标签。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>
在火狐下面还是新窗口打开一个页面。解决办法:
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
问题地址:https://segmentfault.com/q/1010000004689615
6.怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?
今天在论坛上看到这样一个问题,有必要编辑搜集下。
问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端
题主用jquery接收
<input name="c_pic" id="c_pic" type="file" class="file">
用的方法是:
var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){
var file = this.files[0];
}
题主想用ajax 的post方法把上传图片的相关信息传给后端,
接收到的file是个object file,
请问怎么转换成能够用post传递的数据格式?
当时我看到这个题目就想这还不简单,直接把file通过JSON.stringify(file)
(注:stringify()用于从一个对象解析出字符串),代码如下:
var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}
发现打印出来的是一个空的对象:{}
;有知道的麻烦告知,感激不尽!
于是换了一种思路用uploadfile
插件或百度的webuploader,其中jQuery File Upload
是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
如果支持html5
,可以使用FormData Ajax
上传也能实现的。
7.苹果手机 微信调用百度地图Javascript API 频繁闪退问题
最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题!
在网上查询了下,有网友回答说不要频繁的去new marker
,而是初始化话一定量的marker,然后setPosition
。但是我的页面中匹配当前城市 注入marker也没有几个,所以排除这答案。
最后发现有网友说版本不稳定引起的,于是把百度地图API回退到了1.5
,结果还真是可以了。
百度地图API调用:<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script>
问题参考地址:http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=84541
8.怎样获取优酷站内视频的MP4格式地址,嵌入到手机页面播放(未解决
)
最近的有关项目需要使用video标签播放视频,并且视频的路径src
是优酷里面的视频,所以需要得到优酷里面的mp4路径才能播放。
但是在网上查了下资料,看到优酷的播放格式是一个m3u8
文件。
M3U8文件
是指UTF-8
编码格式的M3U
文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
请问在移动端页面中播放优酷里面的视频,怎样实现?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。