【問題總結】WEB前端開發常見問題彙總

時間 2019-11-20

原文原文鏈接

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

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

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

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

總體思路：php

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

微信與支付寶的掃碼登陸是有一些區別的，微信目前是一個持續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不知道爲啥老閃退)都沒有卡頓問題ios

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

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

可是寫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文件是記錄了一個索引純文本文件，打開它時播放軟件並非播放它，而是根據它的索引找到對應的音視頻文件的網絡地址進行在線播放。

請問在移動端頁面中播放優酷裏面的視頻，怎樣實現？

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', function(){ music.play(); }) //微信下兼容處理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小結 //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 = new 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',
                    duration: 5 * 1000
                  });
                  return;
                }
                resolve();
              }
          }
          reader.readAsText(res.data);
      })
      
    }

調用方式：

 this.donwnloadError(result).then(() => {
  //導出文件成功後的操做
  this.result=result;
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。