前端筆記（1908-1911）

時間 2019-11-08

標籤前端筆記简体版

原文原文鏈接

一、CORS 跨域攜帶 Cookie 發送請求php

參考：http://www.javashuo.com/article/p-xhzqzyaw-x.htmlhtml

http://www.javashuo.com/article/p-qnsrriue-bv.html前端

須要從2個方面解決：
1）服務器端使用CROS協議解決跨域訪問數據問題時，須要設置響應消息頭Access-Control-Allow-Credentials值爲「true」。同時，還須要設置響應消息頭Access-Control-Allow-Origin值爲指定單一域名（注：不能爲通配符「*」）。jquery

2）客戶端須要設置Ajax請求屬性withCredentials=true，讓Ajax請求都帶上Cookie。git

若服務端將Access-Control-Allow-Origin設置爲*，瀏覽器會報錯The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'github

二、iframe sandbox屬性web

參考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframeajax

https://www.w3school.com.cn/tags/att_iframe_sandbox.aspjson

sandbox該屬性對呈如今iframe框架中的內容啓用一些額外的限制條件。小程序

<iframe src="xxx.html" sandbox="allow-top-navigation allow-popups allow-forms allow-same-origin allow-scripts"></iframe>

問題：使用了sandbox屬性iframe窗口沒法跳轉，去掉sandbox屬性便可解決。報錯以下：

解決方案：window.postMessage通訊

參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

window.postMessage() 方法能夠安全地實現跨源通訊。從廣義上講，一個窗口能夠得到對另外一個窗口的引用（好比 targetWindow = window.opener），而後在窗口上調用 targetWindow.postMessage() 方法分發一個 MessageEvent 消息。接收消息的窗口能夠根據須要自由處理此事件。傳遞給 window.postMessage() 的參數（好比 message ）將經過消息事件對象暴露給接收消息的窗口。

// 發送消息
window.parent.postMessage(surl, location.origin);
//接收消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e){
    if (e.origin !== location.origin) {
        return;
    }
    location.href = e.data;
}

安全問題：若是您確實但願從其餘網站接收message，請始終使用origin和source屬性驗證發件人的身份。任何窗口（包括例如http://evil.example.com）均可以向任何其餘窗口發送消息，而且您不能保證未知發件人不會發送惡意消息。可是，驗證身份後，您仍然應該始終驗證接收到的消息的語法。不然，您信任只發送受信任郵件的網站中的安全漏洞可能會在您的網站中打開跨網站腳本漏洞。當您使用postMessage將數據發送到其餘窗口時，始終指定精確的目標origin，而不是*。惡意網站能夠在您不知情的狀況下更改窗口的位置，所以它能夠攔截使用postMessage發送的數據。任何窗口能夠在任何其餘窗口訪問此方法，在任什麼時候間，不管文檔在窗口中的位置，向其發送消息。所以，用於接收消息的任何事件監聽器必須首先使用origin和source屬性來檢查消息的發送者的身份。這不能低估：沒法檢查origin和source屬性會致使跨站點腳本攻擊。

三、video

參考：http://www.942ss.com/?p=1155

https://segmentfault.com/a/1190000020073391?utm_source=tag-newest

問題1：video點擊暫停播放以後，圖像暫停，聲音還在播放的狀況。

解決方案：不要使用video自帶的播放屬性autoplay，用js寫一個播放便可解決問題

$('.prd-detail-top').prepend('<video class="detail-video" controls="controls" src="' + prdDetail.videos_url + '">您的瀏覽器不支持 video 標籤。</video>');
$('.detail-video')[0].play();

在谷歌瀏覽器中會報錯：

問題2：video標籤自動播放問題

參考：https://www.jianshu.com/p/06179ca12dfa

Chrome在66版本後爲了不標籤產生隨機噪音，在18年4月作了更改，瀏覽器爲了提升用戶體驗，減小數據消耗，如今都在遵循autoplay政策。Chrome的文檔給了一個最佳實踐：先把音視頻加一個muted的屬性就能夠自動播放，而後再顯示一個聲音被關掉的按鈕，提示用戶點一下打開聲音。

四、跨域請求

參考：https://caniuse.com/#search=cors

問題1：IE八、IE9不支持CORS跨域

解決方案：jQuery與插件 jQuery-ajaxTransport-XDomainRequest 相互配合就能夠部分解決兼容性問題（XDomainRequest 對象），對於get請求很是簡單，只須要引入該插件，接口協議與頁面要一致（都是http或https）。

問題2：CORS跨域使用XDomainRequest 對象兼容ie8和ie9有限制，請求的時候cookie不能送到服務端

解決方案：使用jsonp（get請求）

jsonp（jquery ajax）與緩存

參考：https://www.w3school.com.cn/jquery/ajax_ajax.asp

cache爲false時ajax請求會自動帶上時間戳如account/ajaxSign?st_callback=handleResponse&_=1573012287871

問題3：jQuery連續發起jsonp請求失敗，只有一個請求會成功，後面的併發請求會報錯：Uncaught TypeError: xxx is not a function

參考：http://www.javashuo.com/article/p-pdrqhfeq-cd.html

解決方案：併發請求送不一樣的jsonpCallback參數（適用於併發請求很少的場合）。指定jsonpCallback參數是爲了緩存請求，節省cdn帶寬

問題4：跨域cookie共享問題

跨域cookie共享問題是在win7環境下的原生ie瀏覽器（ie八、ie9）發現的，查看瀏覽器隱私設置，發現默認設置如圖，這樣會致使請求沒法攜帶cookie。

解決方案：頁面和請求接口頂級域名相同時，服務端設置domain爲頂級域名，如頁面域名爲www.a.com，接口域名爲api.a.com，服務端設置domain爲‘a.com’便可。這樣前端在發跨域請求時（cors或jsonp）就能將cookie發送給服務端。

五、IE 兼容性標記 X-UA-Compatible

參考：https://jingyan.baidu.com/article/bea41d43a40910b4c51be60a.html

我參與的一個項目須要兼容ie8，開始未設置X-UA-Compatible，ie瀏覽器默承認能會使用其餘的文本模式如IE7標準來渲染頁面，此時就會致使一些兼容問題。

X-UA-Compatible 屬性是 IE 瀏覽器在 IE8 版本開始提供的一個特性，容許開發者經過設置 meta 標記來規定 IE 瀏覽器在解析網頁時使用的文檔模式。

擴展

1）pv、uv

　　pv是page view的縮寫，即頁面瀏覽量，一般是衡量一個網絡新聞頻道或網站甚至一條網絡新聞的主要指標。網頁瀏覽數是評價網站流量最經常使用的指標之一，簡稱爲PV。監測網站PV的變化趨勢和分析其變化緣由是不少站長按期要作的工做。 Page Views中的Page通常是指普通的html網頁，也包含php、jsp等動態產生的html內容。來自瀏覽器的一次html內容請求會被看做一個PV，逐漸累計成爲PV總數。

　　UV(獨立訪客)即Unique Visitor，獨立訪客是指某站點被多少臺電腦訪問過，以用戶電腦的Cookie做爲統計依據。00:00-24:00內相同的客戶端只被計算一次。

　　IP(獨立IP)　即Internet Protocol，獨立IP是指訪問過某站點的IP總數，以用戶的IP地址做爲統計依據。00:00-24:00內相同IP地址只被計算一次。

　　對於ADSL上網的用戶：一個用戶有可能在一天以內屢次重複訪問某站點，若是他在同一臺電腦上，而且IP沒有變化的狀況下，那麼這個用戶爲該站點貢獻了一個獨立IP數，一個獨立訪客數，而PV則是隨着他的瀏覽在不斷增長；若是他在中途在不改變電腦的狀況下，掉線了一次，從新連上後IP發生了變化，以後他又訪問了該站點，那麼這個用戶爲該站點貢獻了兩個IP數，一個獨立訪客數。對於網吧、單位、學校上網的用戶：這些場所通常都是採用局域網共享上網的方式，只有一個IP地址接入互聯網，此種狀況就有可能出現獨立訪客數大於獨立IP數，好比某單位內有多人訪問A站點，可是整個單位的公網IP出口就只有一個，那麼不管該單位裏在當日有多少人次訪問A站點，這些用戶爲A站點貢獻的獨立IP數爲1，除非該單位的IP地址發生了變化，相反，這些用戶爲A站點帶來的獨立訪客數就是該單位內當日訪問A站點的實際人數了。因而可知，獨立訪客比獨立IP更具說服力，只不過咱們平時比較關心獨立IP罷了。一個網站的獨立IP數與獨立訪客數是相近的，有可能獨立IP數>獨立訪客數，也有可能獨立IP數<獨立訪客數，固然也有多是相等的，這取決於網站的用戶訪問狀況。而PV則是永遠都是大於等於獨立IP和獨立訪客的，由於PV是重複統計的。

PV(訪問量)

　　PV高不必定表明來訪者多；PV與來訪者的數量成正比，可是PV並不直接決定頁面的真實來訪者數量。好比一個網站就你一我的進來，經過不斷的刷新頁面，也能夠製造出很是高的PV。

UV(獨立訪客)

　　UV是指不一樣的、經過互聯網訪問、瀏覽一個網頁的天然人。好比，在一臺電腦上，哥哥打開了微軟的官方主頁，註冊了一個會員。弟弟一下子也看了看，註冊了另外一個會員。因爲兄弟兩個使用的是相同的計算機，那麼他們的 IP是同樣的，微軟的官方計數器記錄到一個IP登錄的信息。可是，具備統計功能的統計系統，能夠根據其餘條件判斷出實際使用的用戶數量，返回給網站建設者真實、可信和準確的信息。好比經過註冊的用戶，甚至能夠區分出網吧、機房等共享一個IP地址的不一樣計算機。上面的例子就說明雖然是同一IP，可是有2個獨立訪客。再舉個例子吧，好比一個網吧裏，有100我的都進入了個人網站，可是一個網吧對外都是一個IP的，因此統計系統只統計到一個IP；可是由於網吧裏有100人在訪問個人站，儘管他們都僅僅打開個人網站的首頁，或者這100人都把我網站全部頁面都看過了一遍，統計系統都只統計到100個獨立訪客。

IP(獨立IP)

　　表示擁有特定惟一IP地址的計算機訪問您的網站的次數，由於這種統計方式比較容易實現，具備較高的真實性，因此成爲大多數機構衡量網站流量的重要指標。好比你是ADSL撥號上網的，你撥一次號都自動分配一個IP，這樣你進入了本站，那就算一個IP，當你斷線了而沒清理Cookies，以後又撥了一次號，又自動分配到一個IP，你再進來了本站，那麼又統計到一個IP，這時統計數據裏IP就顯示統計了2次。可是UV（獨立訪客）沒有變，由於2次都是你進入了本站。

2）80端口

　　80端口是爲HTTP（HyperText Transport Protocol)即超文本傳輸協議開放的，此爲上網衝浪使用次數最多的協議，主要用於WWW（World Wide Web）即萬維網傳輸信息的協議。能夠經過HTTP地址（即常說的「網址」）加「: 80」來訪問網站，由於瀏覽網頁服務默認的端口號都是80，所以只需輸入網址便可，不用輸入「: 80」了。

3）從瀏覽器喚起QQ進行聊天，是不少公司或者企業會用到的一種客服方式，然而不少時候，一些手機端瀏覽器並不支持直接跳轉到QQ，或者不支持從App內嵌的網頁中跳轉到QQ頁面。

在小程序裏使用web-view 組件承載網頁客服連接（企點）須要使用網頁接待（匿名聊天），而不要使用QQ接待方式（使用該方式不能調起qq會話窗口）