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

genedna 發布于2019-08-22 13:40 / 2376人閱讀

摘要：第三種，使用格式，即在中請求參數處理跨域問題當然請求方式只能是。最后發現有網友說版本不穩定引起的，于是把百度地圖回退到了，結果還真是可以了。請問在移動端頁面中播放優酷里面的視頻，怎樣實現

1.web掃碼登錄怎么實現，思路

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

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

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

整體思路：

前端調用后臺生成二維碼的API，獲取到二維碼圖片和所包含的信息（通常是一個唯一ID）

前端檢測（通過輪詢或者websock，自己選擇）是否有手機掃碼，通過調用后臺接口API，參數為上面的唯一ID

手機掃描二維碼登陸，手機端可以獲取到二維碼里的信息ID，帶上當前登陸用戶ID和二維碼里的ID調用后臺接口。后臺存儲這個二維碼的數據，加上登錄用戶信息，當前臺調用API時，給返回登錄成功。

前端獲取到登錄成功，進行跳轉

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

首先，前端調用二維碼接口，獲取圖片二維碼以及用戶唯一表示uid，然后與服務器建立長連接請求，詢問是否有用戶掃碼登錄。

用戶用APP掃碼之后，會請求服務器接口，將用戶信息與二維碼的uid綁定，前端的長連接就可以請求到當前uid對應的用戶，從而進行登錄操作。
前端的長連接請求類似以下代碼：

   
      
      
      
    Insert title here

問題地址：web掃碼登錄怎么實現，求個思路

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

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

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

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

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

但是寫accpet的原意是要想要篩選出所有圖片_(:з」∠)_
那么為了實現這個需求，同時提高用戶體驗，只能采取枚舉了

修改后的代碼

再試試，果然妥妥的了！

原來是因為Chrome的SafeBrowsing功能會在上傳或保存時檢查文件，
如果網絡連接到google的速度比較快呢，就沒有什么問題。
但是如果連接比較慢，或者干脆跪掉了，那SafeBrowsing就會讓Chrome掛起一段時間，直到文件檢查結束或者超時

使用accept="image/png, image/jpeg, image/gif"就可以解決這個問題，因為這些MIME類型在SafeBrowsing的白名單里面，不需要檢查。
但是如果用像是accept="image/*"這樣的呢，就不行了，就有可能變得卡卡的。

3.瀏覽器攔截跨域請求處理方法

解決跨域的解決辦法有多種，比如jsonp，或者apache 或者nigix里面配置，或者后端的php或者java中配置 cross orgion。

在網上搜了一圈，發現處理方式都差不多，但是我們得清楚這些到底怎么用。

先看下這段代碼：

這段代碼作用是啥，其實這個是解決flash跨域的解決辦法。

看淘寶的使用方式：

https://www.taobao.com/crossdomain.xml

一般crossdomain.xml的位置是放到項目的根目錄下。

下面舉例關于字體跨域的解決方法：

直接了當了說，解決此類問題，最直接的方法就是，就是給被請求的服務器，添加HTTP頭響應頭，這里提供兩種添加HTTP頭的方法：

第一種，就是在程序中添加HTTP頭：

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
  "Access-Control-Allow-Origin": "*", 
}
// HTML

// 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"：

當然請求方式只能是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防止彈出新頁面，但在火狐下無效？

如題所示：

sss

//ps:不加紅顯示不了p標簽。

在火狐下面還是新窗口打開一個頁面。解決辦法：

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

問題地址：https://segmentfault.com/q/1010000004689615

6.怎么通過js獲取上傳的圖片信息（臨時保存路徑，名稱，大小）然后通過ajax傳遞給后端？

今天在論壇上看到這樣一個問題，有必要編輯搜集下。

問題描述：怎么通過js獲取上傳的圖片信息（臨時保存路徑，名稱，大小）然后通過ajax傳遞給后端

題主用jquery接收

用的方法是：

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調用：

問題參考地址：http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=84541

8.怎樣獲取優酷站內視頻的MP4格式地址，嵌入到手機頁面播放（未解決）

最近的有關項目需要使用video標簽播放視頻，并且視頻的路徑src是優酷里面的視頻，所以需要得到優酷里面的mp4路徑才能播放。

但是在網上查了下資料，看到優酷的播放格式是一個m3u8文件。

M3U8文件是指UTF-8編碼格式的M3U文件。M3U文件是記錄了一個索引純文本文件，打開它時播放軟件并不是播放它，而是根據它的索引找到對應的音視頻文件的網絡地址進行在線播放。

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

GPU云服務器云服務器 web應用防火墻常見問題工作總結上半年工作總結網絡管理員工作總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92381.html

php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

Dionysus_go 2019-06-28 14:37 評論0 收藏0
php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

vspiders 2019-06-28 14:33 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
PHP回顧之執行流程及相關概念

摘要：通過，腳本層無需過多考慮執行的具體環境，而本身則可以讓針對自己的特點給出特有實現。模式下，也只執行一次。這幾個概念的關系如下網關協議，與語言無關，所以與關系也不大。總結本文簡要回顧了程序的架構和執行流程，并對幾個容易混淆概念做了介紹。轉載請注明文章出處：https://tlanyan.me/php-review... PHP回顧系列目錄 PHP基礎 web請求 cookie we...

jsdt 2019-07-01 10:14 評論0 收藏0