1. 在chrome瀏覽器出現(xiàn)Uncaught SyntaxError: Unexpected token u
在chrome瀏覽器出現(xiàn) Uncaught SyntaxError: Unexpected token u 頁面一片空白 顯示不了，在Firefox正常
問題原因： 由于使用了localStorage ，會造成廢棄或者未定義的數(shù)據(jù)，就是udefined，當使用Json.parse()解析值為udefined的Json數(shù)據(jù)時 chrome 就會拋出錯誤，而FireFox會返回正確的字符竄，
解決方法，使用LocalStorage.removeItem()把擁有undefined的數(shù)據(jù)清掉； 問題鏈接
2. new Date()對象的兼容性問題
chrome瀏覽器支持 “1990-08-10 15:20:10”的格式，其他瀏覽器不支持，統(tǒng)一支持的是new Date（2015,10,20,15,12），但是chrome得出的是正確的時間，而firefox與IE 的出的時間比正常的時間少了8個小時
chrom：
fireFox：
或許是時區(qū)的問題，但是可以使用valueOf()取它們的毫秒數(shù)是一樣的。所以還是老實的getDate，getHours、getMinute吧
jq.formatCommonTime = function(millisec, isSample) {
var time = new Date();
time.setTime(millisec || 0); //設置需要格式化的時間
if (!!isSample) {
return (time.getMonth() + 1) + '月' + time.getDate() + '日';
}else{
return time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日 ' + time.getHours() + ':' + ((time.getMinutes() < 10) ? "0" : "") + time.getMinutes();
}
}
3、IE瀏覽器控制臺出現(xiàn) Exception in window.onload: Error: An error has ocurredJSPlugin.3005
原因是IE瀏覽器自身更新問題 只要下載補丁更新就好了補丁下載鏈接
4 、需要判斷出IE8瀏覽器
<!--[if lt IE 9]>
.series em{
text-align: right!important;
}
<![endif]-->
//如果是因為其他原因使用不了，比如sass編譯會出錯，可以使用Jquery方法判斷
//判斷是否是IE8及以下
var ie8 = $.support.leadingWhitespace;
if(!ie8){
$('em').addClass('ie8');
}
5、Jquery 使用scroll()函數(shù)在IE8及以下出現(xiàn)問題
原因是監(jiān)聽的是document、或者body，只有改成window就可以了。
//滾動顯示側(cè)邊欄
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
if(scrollTop >= 630){
$('.m-menu').show();
}else{
$('.m-menu').hide();
}
});
6、在服務器上安裝 npm install的時候出現(xiàn)
npm WARN package.json methods@0.0.1No license field.
npm WARN package.json methods@0.0.1No repository field.
npm WARN package.json methods@0.0.1No readme data.
只要在package.json 里面加上
"repository":{"type":"git","url":"git://github.com/username/repository.git"}
or
{"name":"my-application","version":"0.0.1","private":true}
就可以了
7、移動端視頻播放支持
移動端不支持視頻自動播放，所以只好采用poster的方式，如果采用遮蓋一層封面的話，則需要點擊兩次才可以。
還有在安卓手機的微信，當切換page時（fullpage.js會出現(xiàn)），播放器會浮起，所以在離開當前頁面時把視頻remove掉，頁面加載時重新生成視頻。
但是好像iphone手機是支持自動播放的，但是偶爾又不行了。在安卓端如果把controls加上、autoplay去掉，基本可以播放，但是video標簽需要換一種格式來寫,也可能有些手機對視頻的格式有要求：
if(b._$IS['android']){
videoFlag = '<video width="100%" controls="controls" preload="auto"><source src="' + _vLink + '"><p>你的手機不支持video播放器</p></video>';
}else{
videoFlag = '<video width="100%" preload="auto" src="' + _vLink + '" autoplay="autoplay"></video>';
}
或
var videoFlag = '<video width="100%" controls="controls" preload="auto"><source src="' + _vLink + '">
<source src="https://broken-links.com/tests/media/BigBuck.webm" type="video/webm">
<source src="https://broken-links.com/tests/media/BigBuck.theora.ogv" type="video/ogg">
<p>你的手機不支持video播放器</p>
</video>';
8、隱藏元素的滾動條
#element::-webkit-scrollbar {display: none;}
//If you want all scrollbars hidden, use
::-webkit-scrollbar {display: none;}
// I'm not sure about restoring - this did work, but there might be a right way to do it:
::-webkit-scrollbar {display: block;}
overflow屬性設置的值為visible、scroll、hidden、auto
visible 默認值。使用該值時，無論設置的"width"和"height"的值是多少，其中的內(nèi)容無論是否超出范圍都將被強制顯示。
hidden 效果與visible相反。任何超出"width"和"height"的內(nèi)容都會不可見。
scroll 無論內(nèi)容是否超越范圍，都將顯示滾動條。
auto 當內(nèi)容超出范圍時，顯示滾動條，否則不顯示。
所以當div里面的內(nèi)容高度不固定時，如果超出高度就出現(xiàn)滾動條，如果高度不夠那就不出現(xiàn)滾動條，這個時候應該使用auto
9、移動端頁面上出現(xiàn)沒能適配整個屏幕
在移動端的頁面中，在chrome模擬調(diào)試時發(fā)現(xiàn)是完全可以適配屏幕的，但是到了其他瀏覽器以及微信上出現(xiàn)了頁面可以左右滾動的問題，檢查html，body,都沒有發(fā)現(xiàn)有元素溢出，一層層排查進來，發(fā)現(xiàn)是內(nèi)容區(qū)域的確有div溢出了，原因是寬度定為了屏幕寬度90%，需要居中，使用left：50%，margin-left:-25%;類似的方法，可能有些瀏覽器的渲染方式不一樣，才會出現(xiàn)這種問題
10、IE8不支持innerHTML的賦值，報未知運行錯誤。
在ie8中，可以看淡dom對象是有innerHTML屬性的，并且能獲取到innerHTML的值，但是呢，卻不能給innerHTML賦值， 比如說 domObj.innerHTML = "1"都不行。一番查找之后，發(fā)現(xiàn)innerHTML的確有這個問題，但是也只是局限于在tbody中不能用innerHTML插入tr或者是不能往inline元素插入block元素，但我的情況并不屬于這兩種。是網(wǎng)div里面插入div，實在搞不清楚原因，所以也只能另尋辦法了。就是使用createElement()生成節(jié)點，然后再appendChild()的方式解決ie8下的問題
if(!eu._$ltIE10()){
this.__serviceList.innerHTML = str;
}else{
e._$clearChildren(this.__serviceList);
var _nodeList = e._$html2node(str);
this.__serviceList.appendChild(_nodeList);
}
//html2node 方法的實現(xiàn)方式：
_e._$html2node = function(_html){
var _div = document.createElement('div');
_div.innerHTML = _html;
var _list = _e._$getChildren(_div);
return _list.length>1?_div:_list[0];
};
按照html2node的實現(xiàn)方式，其實ie8是支持innerHTML的，唯一可能不同的就是this.__serviceList 與_div;
11、ios點擊返回按鈕取緩存數(shù)據(jù)時候，如果接口返回的數(shù)據(jù)的key一樣，ios會以為這些數(shù)據(jù)都是同一份。
做的一個webView頁面時候，使用相同的key（原來只是wish_card,并沒有index），不同的課程id去請求數(shù)據(jù)，然后以相同的key返回數(shù)據(jù)，
頁面剛加載的時候，數(shù)據(jù)是正確的，但是隨便點擊一個課程卡片跳轉(zhuǎn)到詳情頁，然后再返回的時候頁面卻使用了同一份數(shù)據(jù)。
//初始化課程卡片
$('.course-box').each(function(index, item) {
var courseIds = $(item).attr('data-courseIds');
if(!!courseIds){
getCourseData(item, courseIds, index);
}
});
function getCourseData (node, courseIds, index) {
var cardInfo = '[{"key":"wish_card' + index + '","secKillFlag":0,"infos":' + courseIds + '}]';
var _cardInfo = {jsonStr:cardInfo};
var url ="http://study.163.com/promote2015Q3/getCourseInfos.htm";
jq.post(url, _cardInfo, cbGetCourseData, 'json');
function cbGetCourseData (data) {
var options = {
showCart: false,
showCount: true,
showDesc: false,
showLector: true,
type: 2,
gaPrefix:"",
data: data['wish_card' + index]
};
$(node).courseCard(options);
}
}
返回的數(shù)據(jù)類型：{"wish_card4":[{"productId":1278001,"productName":"????”????è???-
初步判斷是ios讀取緩存的問題，因為用fiddler抓包，返回的時候并沒有重新發(fā)出請求。那么因為是取的同一份數(shù)據(jù)，那么應該會是因為ios判斷這些數(shù)據(jù)都是同一份，
js代碼里面唯一能讓ios產(chǎn)生混淆的應該是key的問題了，于是給key加了index，然后就解決了
13、firefox 與chrome 獲取html 文檔的方式不一樣
當獲取頁面的窗口進行頁面滾動時，chrome、ie、safari使用的是document.body,而firefox取的是document.documentElement,所以可以選擇使用這樣的方式解決兼容性問題
var docBody = document.body || document.documentElement;（可以取window 比如$(window)）
//我的獎勵明細
$('#j-myDetail').click(function(){
//fireFox 中document.body.scrollTop 永遠等于0、
//chrome中document.documentElement.scrollTop 永遠為0，
//但是因為頁面剛加載完scrollTop都是0 所以無法使用這個來判斷，所以暫時還是判斷UA
var docBody = (ua.indexOf('firefox') != -1) ? document.documentElement : document.body;
$(docBody).animate({scrollTop: $('.l-m-sharelist').offset().top},200,function(){
$('#j-openList').addClass('open');
$('#j-dataList').slideDown(10,function(){}).addClass('hasOpen');
});
});
14、服務器端記錄的cookie需要帶上domain、path才能清掉
//如果服務器端記錄cookie，那么一般都是記在根域名、根目錄下、比如study記的cookie
domain： .study.163.com path: /
//那么在專題頁面清除cookie的時候，是path不一樣，專題的path /topics/sales,所以是刪除不了的
$.removeCookie('inviteFromSpringsales');
//改成
$.removeCookie('inviteFromSpringsales',{path:'/',domain:'study.163.com'});
15、javascript中的深拷貝和淺拷貝
其實深拷貝與淺拷貝的最終得到的結(jié)果都一樣的，只是淺拷貝出來的新對象與元對象指向同一個內(nèi)存地址，改變?nèi)魏我粋€都會影響到另一個對象。而深拷貝則是把數(shù)據(jù)拷貝出來放到新的內(nèi)存地址，兩個對象的數(shù)據(jù)不會影響
//淺拷貝：
var obj1 = { a:1, b:{ c:2 }};
var obj2 = obj1;
console.log(obj2); //{ a:1, b:{ c:2 }};
obj2.b.c = 3;
console.log(obj1) //{ a:1, b:{ c:3 }};
//obj1的值也改變了
//深拷貝：
var obj1 ={a:1,b:{c:2}};
function deepCopy(_originObj){
if(_originObj==null)return null;
if(typeof _originObj !== "object"){
return _originObj;
}
var _clone = {};
if(_originObj.constructor == Array){
_clone = [];
}
for(var i in _originObj){
_clone[i] = arguments.callee(_originObj[i]);
}
return _clone;
}
var obj2 = deepCopy(obj1)；
console.log(obj2); //{a:1,b:{c:2}}
obj2.b.c = 3;
console.log(obj1); //{a:1,b:{c:2}}
//obj1并不會被改變
16、使用Object.prototype.toString.call(_data).toLowerCase()=='[object '+_type+']'; 判斷一個變量的數(shù)據(jù)類型
(1) 在toString方法被調(diào)用時,會執(zhí)行下面的操作步驟:
(2) 如果this的值為undefined,則返回"[object Undefined]".
(3) 如果this的值為null,則返回"[object Null]".
(4) 讓O成為調(diào)用ToObject(this)的結(jié)果.
(5) 讓class成為O的內(nèi)部屬性[[Class]]的值.
(6) 返回三個字符串"[object ", class, 以及 "]"連接后的新字符串.
var _isTypeOf = function(_data,_type){
try{
_type = _type.toLowerCase();
if (_data===null) return _type=='null';
if (_data===undefined) return _type=='undefined';
return Object.prototype.toString.call(_data).toLowerCase()=='[object '+_type+']';
}catch(e){
return !1;
}
};
16、文件上傳獲取判斷文件的尺寸大小
判斷文件的width and height 、_URL方法只支持現(xiàn)代瀏覽器，移動端未測試過，使用的時候會出現(xiàn)一個問題，img.onload方法并不會阻塞js的執(zhí)行,所以需要使用圖片大小判斷的后續(xù)代碼，只能放到onload方法中執(zhí)行。
方法一： 只需要獲取input：file 框就可以
try{
var _URL = window.URL || window.webkitURL,
img = new Image();
img.onload = function(){
console.log(this.width + '*' + this.height);
if(this.width < 800 || this.height < 300){
that.errorTips('圖片大小不能小于800*300哦');
uploadPro.__resetFile();
return false;
}
that.filename = _fileName;
return true;
}
img.src = _URL.createObjectURL(this.__realUpload.files[0]);
}catch(e){
console.log('can not get image width and height');
}
方法二： 需要獲得圖片的url
var img = new Image();
img.onload = function(){
console.log(this.width + '*' + this.height);
if(this.width < 600 || this.height < 300){
mUploadErrorTips('圖片大小不能小于600*300哦');
$('#j-selectFile').css({'display':'block'});
$('.filename').html('');
$('#j-reselectBox').css({'display':'none'});
return false;
}else{
saveData();
}
}
img.src = _data.originPhotoUrl;
17、一些奇奇怪怪的bug
(1) 一些情況下對非可點擊元素監(jiān)聽click事件，ios下不會觸發(fā)，css增加cursor:pointer就搞定了。當然想要干脆靜止點擊就是not-allowed。
(2) qq瀏覽，uc瀏覽以及ios的瀏覽器，滾動時不會觸發(fā)scroll事件，但會觸發(fā)touchmove。當停止?jié)L動后會出發(fā)scroll。
(3) -webkit-tap-highlight-color可以取消點擊高亮。
(4) android4.4以下版本，設置圓角屬性需要在直接元素上，向父元素設置圓角并且指定overflow:hidden是不會生效的。
18、關于微信屏幕支付寶支付的解決方案
因為考拉那邊在微信中可以使用微信支付，經(jīng)過抓包分析發(fā)現(xiàn)，微信屏蔽是根據(jù)當前頁面的鏈接來的，當webView頁面加載完畢之后，
(1) 微信發(fā)現(xiàn)當前頁面的鏈接如果是阿里的鏈接，那么就會跳轉(zhuǎn)到另外一個頁面。
(2) 解決方案是在自己的域名下的文件嵌套一個iframe，然后使用iframe加載支付寶的頁面就ok了，
(3) 因為微信app里面監(jiān)聽不到iframe加載完畢的事件，也就無法判斷iframe加載的頁面。
主要邏輯：
在支付頁面，前端會把支付物品信息通過form表單通過iframe提交給后端，然后后端把物品的信息編碼成一個鏈接然后redirect到阿里的支付頁面，然后在iframe中這個鏈接會跳轉(zhuǎn)到阿里的支付頁面，正常情況下這樣就結(jié)束了。
但是為了解決按返回按鈕后的復雜操作，所以決定新開一個頁面進行提交，所以并不需要后端直接跳轉(zhuǎn)，而是先跳轉(zhuǎn)到一個新的頁面并把支付鏈接回填回來。
然后前端拿到支付鏈接之后，把鏈接賦值到iframe中，那么iframe就會跳轉(zhuǎn)到支付寶的支付頁面，就可以了。
但是前端給siframe的src賦值時，出現(xiàn)了一個refused display page 'http://study.163.com/xxx', because x-frame-sameorigin 的錯誤，頁面顯示不出來，
原因是前端不能手動給iframe設置與父頁面相同域名的鏈接?，所以只好叫后端跳轉(zhuǎn)了。
payOrder.ftl 提交物品信息給后端
<form action="/pay/orderRedirectPage.htm" name="payForm" id="payForm">
<input type="hidden" name="orderUrl" id="toPayUrl"/>
</form>
后端跳轉(zhuǎn)到 alipayOrder.ftl 并回填支付鏈接
<body style="min-height:520px;margin:0;padding:0;background-color:#f5f5f9;">
<!-- 頂部導航欄 -->
<div class="g-content" style="min-height:520px;">
<iframe src="" style="min-height:520px;" id="j-alipay" name="alipay" src="" style="border:none;" width="100%" height="100%"></iframe>
<form action="/pay/mobileAlipay.htm" name="payForm" id="payForm" target="alipay">
<input type="hidden" name="orderUrl" id="toPayUrl"/>
<input type="hidden" name="redirectToAlipay" value="true" id="toPayUrl"/>
</form>
</div>
<!-- @NOPARSE -->
<script>
<#if orderUrl?exists>window.orderUrl = "${orderUrl?html}";</#if>
if(!!window.orderUrl){
document.getElementById('toPayUrl').value = window.orderUrl;
console.log(window.orderUrl);
document.forms[0].submit();
}
</script>
<!-- /@NOPARSE -->
alipayOrder.ftl 獲取到支付鏈接再構(gòu)造一個表單通過iframe提交給后端，然后后端直接進行跳轉(zhuǎn)，那么iframe里面就可以跳轉(zhuǎn)到支付寶支付頁面了。
19、在ios微信瀏覽器中出現(xiàn)fixed定位低z-index元素覆蓋在absolute定位高z-index元素上面
在微信瀏覽器中，首先要彈出一個框，點擊這個彈框的一個按鈕之后，如果保存成功，就會關閉當前彈框，然后再彈出另一個框，然后就出現(xiàn)了cover層覆蓋在了彈框上面
結(jié)構(gòu)以及樣式如下
蒙層樣式
div.m-com-mask {
z-index: 1000;
background-color: #3b3b3b;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.75;
filter: alpha(opacity=75);
}
彈窗樣式
div.m-winmark {
position: absolute;
z-index: 4001;
top: 886.5px;
left: 47px;
border: 1px solid #BABECB;
background: #ffffff;
color: #444;
box-shadow: 0px 3px 14px #aaa;
-webkit-box-shadow: 0px 3px 14px #aaa;
}
html結(jié)構(gòu)
<div class="auto-1464943864173 m-com-mask"> </div>
<div class="auto-1464943864174 m-basewin" style="top: 886.5px; left: 47px;">
<div class="zbar" id="auto-id-1464943864232">
<div class="icon ic4"></div>
<div class="cnt cntnom">關注成功！</div>
</div>
<span class="zcls" title="關閉" id="auto-id-1464943864231">×</span>
</div>
其實簡單的說就是兩個兄弟元素A、B,A是fixed定位但是層級z-index低，B是absolute定位但是層級高，按正常情況B是覆蓋在A前面的，但是在微信瀏覽器情況確實A覆蓋在B的前面，但是更奇葩的是，就算A覆蓋在B的前面了，還是可以點到B的。結(jié)果就是以下
但是如果點擊確認，沒有關閉下面的彈框的話，那么是正常的，比如這樣
同樣的操作，同樣的彈框，只是是否把底下的彈框remove掉，就會出現(xiàn)這樣的問題，所以可能就是下面的彈框remove的問題？嘗試使用了transform:translate3d(0, 0, 0)也沒解決。后來還是沒找到原因，最后因為是在移動端，所以只能暫時也把彈框的定位改成fixed再居中把原有的定位覆蓋就沒有問題了。
body div.m-basewin {
position: fixed!important;
top: 50%!important;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
20、在iphone5s版微信中，flex布局不起作用
由于flex有新老版本的問題，iphone5沒有更新flex的寫法，所以還是加上老的寫法就解決了
ul{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
background-color: #f2f4f7;
height: 100%;
}
li{
-webkit-box-flex:1;
-webkit-flex:1;
flex: 1;
text-align: center;
}
21、使用fs.readFileSync()讀取文件，打包之后中文亂碼
使用browserify打包html模板文件，需要用到fs.readFileSync()方法，在編輯器中明確顯示是utf-8編碼，但是打包后的文件中文亂碼。我用的控制臺是powerShell，但是使用git bash打包是正常的。原因是控制臺的編碼跟文件編碼不一致導致的。所以只要更改控制臺的編碼就可以了,解決方法：
中文編碼號(GB2312): 936
utf8: 65001
- 運行cmd
- 輸入chcp，查看當前的控制臺的編碼
- 輸入chcp 65001,回車，控制臺的編碼就被設置成了utf8的編碼
- 打包之后，中文就不會亂發(fā)了
22、在異步請求回調(diào)函數(shù)中新打開頁面或者提交form表單被瀏覽器攔截
在平常需要做的一些操作可能是需要先發(fā)一個請求給后端，在返回的結(jié)果做判斷之后做一些操作，但是最近發(fā)現(xiàn)在異步請求回調(diào)中打開新窗口或者提交form表單新打開窗口都會被瀏覽器攔截。因為瀏覽器會認為這個是不安全的操作（比如廣告之類的）。
解決方法是把異步請求變?yōu)橥秸埱?，發(fā)請求之后阻斷瀏覽器，回調(diào)之后打開窗口，然瀏覽器認為這兩個操作是同一個操作就可以了?；蛘呤钱惒秸埱蠡卣{(diào)之后拋出一個事件，然后結(jié)束。在回調(diào)外面監(jiān)聽拋出的事件，然后新打開窗口。
23、使用browserify、gulp打包之后會出現(xiàn)在每個字符之間多了一個NUL
為了從gulp打包過度到browserify打包方式，先用browserify把js根據(jù)依賴來打包出一個js文件。然后使用gulp把打包出來的js與html再打包成一個html文件。打包出來的html文件出現(xiàn)了亂碼
原因是兩次打包用的編碼不一樣。還是用的powershell，就是設置了utf8編碼，好像打包出來的是uft-16 with BOM的，所以經(jīng)過gulp再次打包之后就會出現(xiàn)這種情況。所以還是找個cmd編碼的統(tǒng)一的。比如git bash打包出來就沒有問題。
24、 css3 兼容性寫法
// flex
ul {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
li {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
// transform
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
25、css min-width屬性不認auto值，且選擇器權(quán)重無效。
使用web端的組件，需要覆蓋一些樣式，在iphone及一些瀏覽器沒有問題，但是在某些安卓手機上，發(fā)現(xiàn)盡管權(quán)重已經(jīng)比之前的大，但是不起作用。調(diào)試發(fā)現(xiàn)，需要覆蓋掉的min-width屬性的值設置為auto不起作用，查看w3c發(fā)現(xiàn)min-width的值沒有auto,所以才會出現(xiàn)問題，改為0就好了，選擇器權(quán)重的問題，不知道什么問題，加!important就好了
26、解決點擊瀏覽器返回按鈕不刷新文件，請求頭出現(xiàn)provisional headers are shown問題
點擊瀏覽器返回按鈕之后，瀏覽器會從緩存里面讀取上一個頁面的頁面數(shù)據(jù)，如果此時需要實時更新則會出現(xiàn)問題問題，比如前后兩次后端在html中不一樣的情況，出現(xiàn)這樣的情況可以讓后端返回html時帶上cache-control緩存頭，讓瀏覽器點擊返回按鈕時，強制去服務器請求新的頁面。
以上問題出現(xiàn)常見的現(xiàn)象是request headers出現(xiàn)provisional headers are shown，解釋如下
之所以會出現(xiàn)這個警告，是因為去獲取該資源的請求其實并（還）沒有真的發(fā)生，所以 Header 里顯示的是偽
信息，直到服務器真的有響應返回，這里的 Header 信息才會被更新為真實的。不過這一切也可能不會發(fā)生，
因為該請求可能會被屏蔽。比如說 AdBlock 什么的，當然了不全是瀏覽器擴展，具體情況具體分析了
當然，如果導致出現(xiàn)provisional headers are shown這個信息的問題有很多，具體參考這篇文章provisional headers are shown
