【问题】web前端开发常见问题汇总

前端之家收集整理的这篇文章主要介绍了【问题】web前端开发常见问题汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

整体思路:

微信与支付宝的扫码登录是有一些区别的,微信目前是一个持续27s的长连接请求;而支付宝是持续循环的短连接请求。其实原理是一样的。

首先,前端调用二维码接口,获取图片二维码以及用户唯一表示uid,然后与服务器建立长连接请求,询问是否有用户扫码登录

用户用APP扫码之后,会请求服务器接口,将用户信息与二维码的uid绑定,前端的长连接就可以请求到当前uid对应的用户,从而进行登录操作。
前端的长连接请求类似以下代码

    <!DOCTYPE html>  
    <htmlheadMeta charset="UTF-8"title>Insert title here</script src="http://code.jquery.com/jquery-latest.js"></scriptbody>  
        div id="divCon">  
            img ="" id="QrCodeImg" />  
        divtype="text/javascript">  
        $(document).ready(() {  
            var uuid = 131422035;  
             validateLogin(){  
                $.get("/walletadminV2/api/testServlet/testLogin?uuid=" + uuid,(data,status) {  
                    if(data == ""){  
                        validateLogin();  
                    }else{  
                         obj = eval(( data + ));  
                        alert(登录成功了: obj.uname);  
                    }  
                });  
            }  
              
            validateLogin();  
        });  
    >  

问题地址: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/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" />
="*.taobao.net" ="*.taobaocdn.com" ="*.allyes.com" >

一般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" 处理Ajax跨域问题
        success: (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 ="p" draggable="true" ondragstart="dragStart(event)">sssp //ps:不加红显示不了p标签ondragover="dragOver(event)" style="width:100%;height:50px;" dragOver(e){
stopDefault(e);
}
 stopDefault(e) {
 event  e||window.event;
 (event.preventDefault) {
event.preventDefault();
}  {
event.returnValue false;
}
}
>

在火狐下面还是新窗口打开一个页面解决办法:

document.body.ondrop =  (event) {
    event.preventDefault();
    event.stopPropagation();
}

 问题地址:https://segmentfault.com/q/1010000004689615

6.怎么通过js获取上传图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?

今天在论坛上看到这样一个问题,有必要编辑搜集下。

问题描述:怎么通过js获取上传图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端

题主用jquery接收

name="c_pic" type class="file">

用的方法是:

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,1)">);

 readFile(){ 
var file = this.files[0]; 
}

题主想用ajax 的post方法上传图片的相关信息传给后端,
接收到的file是个object file,
请问怎么转换成能够用post传递的数据格式?

当时我看到这个题目就想这还不简单,直接把file通过JSON.stringify(file)(注:stringify()用于从一个对象解析出字符串),代码如下:

];
var file_json = JSON.stringify(file);
console.log(file_json); 打印出来是: {}
$.post(''插件或百度的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

12.audio元素和video元素在ios和andriod中无法自动播放

    
    原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;

    /音频,写法一
    <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
    
    音频,写法二
    <audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg,不支持在播放bg.mp3
    </audio>
    
    JS绑定自动播放(操作window时,播放音乐)
    $(window).one('touchstart',1)">(){
        music.play();
    })
    
    微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady",1)"> () {
        music.play();
    },1)">);
    
    小结
    1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
    2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
    3.注意不要遗漏微信的兼容处理需要引用微信JS;

 13.处理文件下载失败,如何将Blob对象转换为Json,处理异常错误

使用FileReader,核心代码

var reader = new FileReader()
reader.onload = e => console.log(JSON.parse(e.target.result))
reader.readAsText(blob)

捕获异常:

//导出文件错误提示
    donwnloadError(res){
      let result = {};
      return new Promise((resolve,reject) => {
          let reader =  FileReader();
          reader.onload = e => {
            try{
                result = JSON.parse(e.target.result);
              }catch(error){
                
              }finally{
                if(typeof result.status !== 'undefined'){
                  this.$message({
                    message: result.message,type: 'error'
                  });
                  return;
                }
                resolve();
              }
          }
          reader.readAsText(res.data);
      })
      
    }

调用方式:

 this.donwnloadError(result).then(() => {
  导出文件成功后的操作
  this.result=result;
})

 

猜你在找的程序笔记相关文章