WEB之常見工做問題總結（1-20）

時間 2019-12-04

標籤 web 常見問題總結欄目 HTML 简体版

原文原文鏈接

1.web掃碼登陸怎麼實現，思路

步驟       WEB平臺                手機
第1步      生成二維碼
第2步     （ajax監控後臺）          掃碼
第3步     （ajax監控後臺）          肯定（後臺異步通知WEB平臺）
第4步      AJAX發現狀態改變，登錄成功

ajax監控後臺的流程：生成二維碼後javascript

setTimeout(function(){
    //AJAX請求，檢測狀態
},5000);

總體思路：php

前端調用後臺生成二維碼的API，獲取到二維碼圖片和所包含的信息（一般是一個惟一ID）
前端檢測（經過輪詢或者websock，本身選擇）是否有手機掃碼，經過調用後臺接口API，參數爲上面的惟一ID
手機掃描二維碼登錄，手機端能夠獲取到二維碼裏的信息ID，帶上當前登錄用戶ID和二維碼裏的ID調用後臺接口。後臺存儲這個二維碼的數據，加上登陸用戶信息，當前臺調用API時，給返回登陸成功。
前端獲取到登陸成功，進行跳轉

微信與支付寶的掃碼登陸是有一些區別的，微信目前是一個持續27s的長鏈接請求；而支付寶是持續循環的短鏈接請求。其實原理是同樣的。html

首先，前端調用二維碼接口，獲取圖片二維碼以及用戶惟一表示uid，而後與服務器創建長鏈接請求，詢問是否有用戶掃碼登陸。前端

用戶用APP掃碼以後，會請求服務器接口，將用戶信息與二維碼的uid綁定，前端的長鏈接就能夠請求到當前uid對應的用戶，從而進行登陸操做。
前端的長鏈接請求相似如下代碼：html5

<!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掃碼登陸怎麼實現，求個思路java

2.解決input[type=file]打開時慢、卡頓問題

爲何在input標籤類型爲file上傳文件時在標籤中設置屬性 accpet="image/*"，打開本地文件夾的速度特別慢？jquery

通過測試發現，在mac裏面safari、Firefox、Chrome(opera不知道爲啥老閃退)都沒有卡頓問題git

在windows裏面，Firefox不卡頓，只有Chrome卡頓。github

因而我決定先去掉accpet試試……
果真就沒有了卡頓的問題。
那麼本包在試試accpet="image/jpg"果真也不卡卡的了！！
看來問題的所在就是"image/*"web

可是寫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上傳也能實現的。