摘要：判斷系統(tǒng)版本號獲取具體的系統(tǒng)版本號微信輸入法鍵盤彈起頁面無法還原判斷系統(tǒng)防止在多個間切換時做過多操作微信分享至朋友圈成功后不回調(diào)問題微信分享至朋友圈后回調(diào)的方法內(nèi)若使用，需配置為同步，否則會出現(xiàn)不回調(diào)的情況。

持續(xù)更新

MP3 不允許啟動AudioContext

The AudioContext was not allowed to start. 
It must be resumed (or created) after a user gesture on the page

pc端打開chrome瀏覽器，新建頁簽，地址欄輸入 
chrome://flags/#autoplay-policy 選擇 No user gesture is required
之后重啟瀏覽器即可，chrome瀏覽器更新版本后的新增的安全策略。

判斷iOS系統(tǒng)版本號

if(navigator.userAgent.match(/iphone/i)){ 
    var verinfo = navigator.userAgent.match(/os [d._]*/gi); 
    version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//獲取具體的系統(tǒng)版本號 
    console.log(version);
}

【M】iOS12微信輸入法鍵盤彈起H5頁面無法還原

//判斷ios系統(tǒng)
var u=navigator.userAgent;
if(u.indexOf("iPhone")>-1){
    var flag;
    $("body").on("focus","input",function(){
        flag=false;
    });
    $("body").on("blur","input",function(){
        flag=true;
        setTimeout(function(){
            if(flag==false){
                return false;
            }else{
                document.body.scrollTop=document.body.scrollTop;
            }
            //防止在多個input間切換時做過多操作
        },0)
    });
}

【M】微信JSSDK分享至朋友圈成功后不回調(diào)問題

微信分享至朋友圈后回調(diào)的方法內(nèi)若使用ajax，需配置為同步（async:false），否則會出現(xiàn)不回調(diào)的情況。

var share_opts = {
     title : "首屆接梗王大賽，這些00后都不懂的梗，你能接上來多少？",
     desc : "1分鐘，挑戰(zhàn)10道題，包含電影、動漫、游戲...答對有獎！快來挑戰(zhàn)！>>",
     img : "../images/share.jpg",
     url : location.href.split("#")[0],
     key : "",
     successCallback: function(){
        $.ajax({
           type: "post",
           dataType:"json",
           async : false,
           url: "common/share.php",
           data:{"url":location.href.split("#")[0]},
           success: function(data){
              if(data.status==1) {
                 alert("分享成功，可再次挑戰(zhàn)！");
                 window.location.href=window.location.href;
              }
           }
        });
     }
  };
 
  $(function(){
     weixin_jssdk_ops.init(share_opts);
  });

【swiper】4.0滾輪無法滾動

參數(shù)
3.0
mousewheelControl : true,//開啟鼠標(biāo)切換
4.0
mousewheel : true,//開啟鼠標(biāo)切換

解決方式

//從底層庫類注釋執(zhí)行代碼
//搜索 
// B.handle
//
//注釋 
// if (!s.mouseEntered && !a.releaseOnEdges)
// return !0;

【M】rem逐幀動畫抖動解決方案

https://aotu.io/notes/2017/08/14/fix-sprite-anim/

【M】audio標(biāo)簽在蘋果機(jī)上無法自動播放

動態(tài)改變微信title

    var $body = $("body");
    document.title = "五班老同學(xué)（35）";
    var $iframe = $("");
    $iframe.on("load",function() {
        setTimeout(function() {
            $iframe.off("load").remove();
        }, 0);
    }).appendTo($body);

判斷是否是微信環(huán)境

    function isWeChat(){
        this.ua = navigator.userAgent.toLowerCase();
        return this.ua.match(/MicroMessenger/i) == "micromessenger"?true:false;
    }

解決a標(biāo)簽雙擊出現(xiàn)藍(lán)色背景

a,button,input,optgroup,select,textarea, div {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍(lán)色外邊框和灰色半透明背景*/
}

判斷瀏覽器低版本插入HTML提示函數(shù)

if(!!window.ActiveXObject || "ActiveXObject" in window){
    $("body").append("
您使用的瀏覽器版本過低，可能會影響到您瀏覽本頁面，建議升級您的瀏覽器：  谷歌 Chrome
").css("padding-bottom","200px");
};

前端引用外鏈須知

//正常外鏈引用
 

//防止外鏈加載緩慢 加上異步加載  

//方法一     -async
 
此方法只兼容高版本

//方法二    動態(tài)創(chuàng)建JS
(function() {
  var hm = document.createElement("script");
  hm.src = "http://x.js";
  var s = document.getElementsByTagName("body")[0]; 
  s.appendChild(hm);
})();

監(jiān)聽video播放或暫停事件

var myVideo=document.getElementById("video");  
myVideo.addEventListener("play",function(){  
     //播放執(zhí)行
});  
myVideo.addEventListener("pause",function(){  
     //暫停執(zhí)行
}) 

UC瀏覽器會出現(xiàn)背景圖可點的情況

bug說明
# 當(dāng)背景圖采用img的方式時，在UC瀏覽器下（其他瀏覽器不會），會出現(xiàn)點擊背景圖，瀏覽器會當(dāng)做一張圖片解析，彈出背景圖。

解決方案
# 給img標(biāo)簽添加去除瀏覽器默認(rèn)行為的點擊事件
# 把img變成background  （把圖片變成css中的背景圖）

代碼示例
//html

【PC端】CKobject多個視頻同時播放-其它視頻未關(guān)閉

API 文檔
http://www.ckplayer.com/manual/

線上例子 
http://act.leiting.com/wd/201705/pk/pc/index.html

代碼
if(CKobject.getObjectById("ckplayer_a1")){
    CKobject.getObjectById("ckplayer_a1").videoPause();
}
if(CKobject.getObjectById("ckplayer_a2").playOrPause){
    CKobject.getObjectById("ckplayer_a2").playOrPause();
}

【移動端】上傳附件

蘋果手機(jī)目前只支持訪問圖片和視頻格式的文件上傳，暫不支持其他格式的文件
安卓手機(jī)支持多種格式上傳，但存在部分機(jī)型不支持或是失效
建議：上傳除圖片以外的格式文件還是在PC上完成比較好

//錯誤示范
在瀏覽器模擬iphone的時候是各種文件都可以上傳（以真機(jī)為主）

//正確示范
iphone目前只支持訪問圖片和視頻格式的文件上傳（真機(jī)測試結(jié)果）

【移動端】使用margin排版問題

margin 排位會有問題，最好使用 定位
【移動端】使用margin排版問題

【移動端】點擊事件無法觸發(fā)

JS創(chuàng)建DOM的時候，原本的事件無法綁定、事件委托失敗,


//錯誤示范
$(".picture").on("click",function(){
 alert(1)
}）

//正確示范（是在$(".product ul")下面創(chuàng)建DOM）使用綁定的方式
$(".product ul").on("click",".picture",function(){
 alert(1)
}）

雷霆游戲console

(function() {
    this.log = window.console.log;
    this.log("%cL%ce%ci%cT%ci%cn%cg %cG%ca%cm%ce", "font-size:30px;color:#32e60b;", "font-size:30px;color:#64d41b;", "font-size:30px;color:#97e012;", "font-size:30px;color:#f9f701;", "font-size:30px;color:#fe9e00;", "font-size:30px;color:#d4651b;", "font-size:30px;color:#5f3b7a;", "font-size:30px;color:#3d319a;", "font-size:30px;color:#313eb0;", "font-size:30px;color:#1f38ac;", "font-size:30px;color:#0b1479;");
    this.log("我們是XXXXXXX-%c平臺Web前端團(tuán)隊", "color:#fd6a7f;font-weight:bold;");
    this.log("XXXXXX始終貫徹著-%c為用戶創(chuàng)造美好體驗", "color:#fd6a7f");
    this.log("加入XXXXXX-%chttp://BAIDU.com/", "color:#fd6a7f");
    this.log("%c", "padding:30px 140px;line-height:100px;background:url("logo.png") no-repeat;background-size:100% 100%;");
    this.log("%c--------", "color:pink")
})();

JS如何判斷是不是iphoneX？

function isIphoneX(){
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}