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

最新推荐文章于 2024-04-15 20:23:43 发布

57993

最新推荐文章于 2024-04-15 20:23:43 发布

阅读量548

点赞数

分类专栏：面试文章标签：前端 firefox chrome html css

本文链接：https://blog.csdn.net/weixin_48728668/article/details/112123725

版权

本文介绍了前端开发中遇到的一些典型问题，包括web扫码登录的实现、input[type=file]卡顿问题、跨域请求处理、IE11的400错误、微信调用百度地图API的闪退、视频网站视频嵌入、iOS键盘遮挡、页面闪屏、IE9的v-for渲染问题、iPhone Safari视频自动全屏、隐藏元素尺寸获取、audio和video自动播放、iOS的overflow: hidden卡顿、用户设备判断和移动端适配等，并提供了相应的解决方案。

摘要由CSDN通过智能技术生成

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