1.web掃碼登錄怎么實現，思路?
步驟 WEB平台 手機
第1步 生成二維碼
第2步 （ajax監控后台） 掃碼
第3步 （ajax監控后台） 確定（后台異步通知WEB平台）
第4步 AJAX發現狀態改變，登陸成功
ajax監控后台的流程：生成二維碼后
setTimeout(function(){ //AJAX請求，檢測狀態 },5000);
整體思路：
- 1.前端調用后台生成二維碼的API，獲取到二維碼圖片和所包含的信息（通常是一個唯一ID）
- 2.前端檢測（通過輪詢或者websock，自己選擇）是否有手機掃碼，通過調用后台接口API，參數為上面的唯一ID
- 3.手機掃描二維碼登陸，手機端可以獲取到二維碼里的信息ID，帶上當前登陸用戶ID和二維碼里的ID調用后台接口。后台存儲這個二維碼的數據，加上登錄用戶信息，當前台調用API時，給返回登錄成功。
- 4.前端獲取到登錄成功，進行跳轉
微信與支付寶的掃碼登錄是有一些區別的，微信目前是一個持續27s的長連接請求；而支付寶是持續循環的短連接請求。其實原理是一樣的。
首先，前端調用二維碼接口，獲取圖片二維碼以及用戶唯一表示uid，然后與服務器建立長連接請求，詢問是否有用戶掃碼登錄。
用戶用APP掃碼之后，會請求服務器接口，將用戶信息與二維碼的uid綁定，前端的長連接就可以請求到當前uid對應的用戶，從而進行登錄操作。
前端的長連接請求類似以下代碼：
<!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掃碼登錄怎么實現，求個思路
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/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文件是記錄了一個索引純文本文件，打開它時播放軟件並不是播放它，而是根據它的索引找到對應的音視頻文件的網絡地址進行在線播放。
請問在移動端頁面中播放優酷里面的視頻，怎樣實現？
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', 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; })