营销H5项目-BugList+解决方案+方法

Posted 2021-03-22 homehtml

作者会持续更新，后续会整合SF.gg上 其他小伙伴整理的资料

动态改变微信title

    var $body = $(‘body‘);
    document.title = ‘五班老同学（35）‘;
    var $iframe = $("<iframe style=‘display:none;‘ src=‘/favicon.ico‘></iframe>");
    $iframe.on(‘load‘,function() {
        setTimeout(function() {
            $iframe.off(‘load‘).remove();
        }, 0);
    }).appendTo($body);

判断是否是微信环境

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

解决a标签双击出现蓝色背景

a,button,input,optgroup,select,textarea, div {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

判断浏览器低版本插入HTML提示函数

//以IE8为例
    if (navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器
        if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0
        // alert("请换等级高的浏览器"); 
        var e = ‘<div class="netease-tips" id="_js_neteaes_tips" style="position: fixed;width: 100%;height: 0;left: 0;bottom: 0;overflow: hidden;z-index: 1000000!important;;height: 45px;">                    <div style="position: relative;zoom: 1;width: 950px;margin: 0 auto;height: 45px;background: #cf1132;text-align: center;zoom: 1;"><a href="javascript:;" style="position: absolute;right: 15px;top: 10px;font-size: 18px;color: #fff;"></a><p style="margin: 0;padding: 0;line-height: 45px;color: #fff;font-size: 18px;">您所访问的网页所处浏览器过低，请用高版本浏览器。</p></div></div>‘;
        $(‘body‘).append(e);
  
    } 

前端引用外链须知

//正常外链引用
<script type="text/javascript" src="http://x.js"></script> 

//防止外链加载缓慢 加上异步加载  

    //方法一     -async
    <script type="text/javascript" src="http://x.js" async></script> 
    此方法只兼容高版本
    
    //方法二    动态创建JS
    (function() {
      var hm = document.createElement("script");
      hm.src = "http://x.js";
      var s = document.getElementsByTagName("body")[0]; 
      s.appendChild(hm);
    })();

监听video播放或暂停事件

    var myVideo=document.getElementById(‘video‘);  
    myVideo.addEventListener(‘play‘,function(){  
         //播放执行
    });  
    myVideo.addEventListener(‘pause‘,function(){  
         //暂停执行
    }) 

UC浏览器会出现背景图可点的情况

    h5. bug说明
    # 当背景图采用img的方式时，在UC浏览器下（其他浏览器不会），会出现点击背景图，浏览器会当做一张图片解析，弹出背景图。
    
    h5. 解决方案
    # 给img标签添加去除浏览器默认行为的点击事件
    # 把img变成background  （把图片变成css中的背景图）
    
    h5. 代码示例
    {code}
    //html
    <img src="mobile/images/bg_.png"   onclick="return false">
    {code}

【PC端】多个视频同时播放-其它视频未关闭

    h4. API 文档
    http://www.ckplayer.com/manual/
    
    h4. 线上例子 
    http://act.leiting.com/wd/201705/pk/pc/index.html
    
    h4. 代码
    {code}
    if(CKobject.getObjectById(‘ckplayer_a1‘)){
        CKobject.getObjectById(‘ckplayer_a1‘).videoPause();
    }
    if(CKobject.getObjectById(‘ckplayer_a2‘).playOrPause){
        CKobject.getObjectById(‘ckplayer_a2‘).playOrPause();
    }
    {code}

【移动端】上传附件

    h3.
    
    {color:red}苹果手机目前只支持访问图片和视频格式的文件上传，暂不支持其他格式的文件（{color}{color:red}[真机截图|http://wiki/download/attachments/532360054/asdas.jpg]{color} {color:red}）{color}
    {color:red}安卓手机支持多种格式上传，但存在部分机型不支持或是失效{color}
    {color:red}建议：上传除图片以外的格式文件还是在PC上完成比较好{color}
    {code}
    //错误示范
    在浏览器模拟iphone的时候是各种文件都可以上传（以真机为主）
    
    //正确示范
    iphone目前只支持访问图片和视频格式的文件上传（真机测试结果）
    
    {code}

【移动端】使用margin排版问题

margin 排位会有问题，最好使用 定位
【移动端】使用margin排版问题

【移动端】点击事件无法触发

JS创建DOM的时候，原本的事件无法绑定、事件委托失败,


//错误示范
$(‘.picture‘).on(‘click‘,function(){
 alert(1)
}）

//正确示范（是在$(‘.product ul‘)下面创建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前端团队‘, ‘color:#fd6a7f;font-weight:bold;‘);
    this.log(‘XXXXXX始终贯彻着-%c为用户创造美好体验‘, ‘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)
}