WEB前端資源代碼：問題篇
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；
WEB前端資源代碼：問題篇