WEB之泛工作问题总结(1-20)

1.web扫码登录怎么落实,思路?

步骤       WEB平台                手机
第1步      生成二维码
第2步     (ajax监控后台)          扫码
第3步     (ajax监控后台)          确定(后台异步通知WEB平台)
第4步      AJAX发现状态改变,登陆成功

ajax监控后台的流水线:生成二维码后

setTimeout(function(){
    //AJAX请求,检测状态
},5000);

整思路:

  • 1.前端调用后台生成二维码的API,获取到二维码图片及所蕴涵的信(通常是一个唯一ID)
  • 2.前端检测(通过轮询或者websock,自己选择)是否有手机扫码,通过调用后台接口API,参数为者的唯一ID
  • 3.手机扫描二维码登陆,手机端可以抱到二维码里之音讯ID,带及时登陆用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数,加上登录用户信息,当前贵调用API时,给返回登录成功。
  • 4.前端取到登录成功,进行跳转

微信及支付宝的扫码登录是发生一部分区分的,微信时凡一个不断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文件是记录了一个索引纯文本文件,打开它经常播放软件并无是广播她,而是基于其的目录找到呼应的音视频文件之网络地址进行在线播放。

请问在运动端页面中播放优酷里面的视频,怎样实现?

9.网页中插入FLASH(swf文件),并且于Flash不遮挡HTML元素

文章地址:http://www.cnblogs.com/moqiutao/p/4754232.html

10.怎么禁止 iPhone Safari video标签视频自动全屏?

文章地址:http://www.cnblogs.com/moqiutao/p/4830438.html

11.JS无法沾display为none的隐藏元素的大幅度与惊人的解决方案

文章地址:http://www.cnblogs.com/moqiutao/p/6508237.html

相关文章