web前端开发中的常见技能问题

1.web扫码登录实现思路

制作思路：

• 前端调用后台生成二维码的API，获取到二维码图片和id

• 前端检测（通过轮询或者websock）是否有手机扫码，通过调用后台接口API，参数为ID

• 手机扫描二维码登陆，手机端可以获取到二维码里ID，带上用户ID和二维码里的ID调用后台接口。

  后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。

• 前端获取到登录成功，进行跳转

2.解决input[type=file]打开时慢、卡顿问题

​ 卡顿

经过测试发现,在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题.在windows里面，Firefox不卡顿，只有Chrome卡顿

原因 chrome上传文件 检测文件，网速快没问题，慢的话就断掉了解了

解决： accpet=“image/gif,image/png,image/jpeg,image/jpg,image/bmp”

3.浏览器拦截跨域请求处理方法

​ 跨域的种类：

• jsonp

• apache或者nigix里面配置

• 后端的php或者java中配置 cross orgion

• proxy 代理跨域

  解决方案：

    1. 被请求的服务器，添加HTTP头响应头   'Access-Control-Allow-Origin': '*', 
  
    2. proxy跨域： target 目标 changeOrigin 使用跨域  proxyTable{ "正则":"替换变量"}
  

4.ie11下Ajax访问后端的时候，只有IE报400错误解决办法

​ 一般在url后面都会添加一个时间戳

​ url:"/order/order.shtml?time="+new Date() ajax请求 防止缓存

​ ie11 不支持new Date 修正 ：url:"/order/order.shtml?time="+new Date().getTime()

5. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

在网页中调用百度地图API，在IOS8系统中，缩放的时候频繁闪退

百度地图 新api中 有些接口 数据不稳定，降低api的版本即可

6.获取视频网站，比如优酷中的视频，嵌入到页面或者移动端

​ 调用官方的api ，调用视频的时候报错,后来发现主要原因 vid(视频id引起的)

​ 把视频id保存在 localstorge，然后在项目index.html 里面获取id,在请求的时候 就没问题了

​ 向后台接口传递数据的时候： 需要传递用户id 和 视频id（在localStorage）

7. ios 键盘遮挡问题

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素
alignWithTop = true  或 空   窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐  （元素向上滚动）
alignWithTop = false  调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。（元素不会滚动）

常见浏览器：IE、Chrome、Firefox、Safari和Opera。 都支持
let _this = this
setTimeOut(function