首页新闻找找看学习计划

dom树渲染不出来

0
悬赏园豆:200 [已解决问题] 解决于 2019-03-14 16:26

如题,部分ios系统版本较低的手机,目前已知iphone 6s、iPhone 6plus手机上,运行在微信浏览器中的部分页面渲染不出来,白屏;挨个把页面所有东西都删了,发现只要用了link标签引入css,哪怕这个css文件是空的,原本的dom就无法显示了,由于是客户反馈的,找了几部同款手机但是系统是最新的,并没有复现,还是第一次遇到这个问题,没有头绪。。。。。。。。。


还有一个情况也是类似的,也是这两个机型,原本用户能正常访问页面,但是自从加了一个时间倒计时效果,js就不执行了,,,,,之所以说js不执行,是因为js的第一行代码就是移除loading元素,而这2款机型一直显示loading图片。。。。。一开始觉得是倒计时问题,加了try catch,把setInterval换成setTimeout都没用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>{{title}}</title>
    <meta name="keywords" content="">
    <meta name="description" content="" />
    <link rel="shortcut icon" href="/static/img/common/favicon.ico">
    <!-- rem布局 根rem计算 -->
    <style>
        @media screen and (min-width: 320px) {html{font-size:42.66px;}}
        @media screen and (min-width: 360px) {html{font-size:48px;}}
        @media screen and (min-width: 375px) {html{font-size:50px;}}
        @media screen and (min-width: 400px) {html{font-size:53.33px;}}
        @media screen and (min-width: 414px) {html{font-size:55.2px;}}
        @media screen and (min-width: 440px) {html{font-size:58.66px;}}
        @media screen and (min-width: 480px) {html{font-size:64px;}}
        @media screen and (min-width: 520px) {html{font-size:69.33px;}}
        @media screen and (min-width: 560px) {html{font-size:74.66px;}}
        @media screen and (min-width: 600px) {html{font-size:80px;}}
        @media screen and (min-width: 640px) {html{font-size:85.33px;}}
        @media screen and (min-width: 680px) {html{font-size:90.66px;}}
        @media screen and (min-width: 720px) {html{font-size:96px;}}
        @media screen and (min-width: 760px) {html{font-size:101.33px;}}
        @media screen and (min-width: 800px) {html{font-size:106.66px;}}
        @media screen and (min-width: 960px) {html{font-size:128px;}}
    </style>
    <script>
        var _rootFontsize = '';
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    var deviceWidth = clientWidth > 500 ? 500 : clientWidth;
                    _rootFontsize = deviceWidth / 7.5;
                    docEl.style.fontSize = deviceWidth / 7.5 + "px";
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);


        // 神策分析代码
        (function(para) {
          var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;
          w['sensorsDataAnalytic201505'] = n;
          w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};
          var ifs = ['track','quick','register','registerPage','registerOnce','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister','getAppStatus'];
          for (var i = 0; i < ifs.length; i++) {
            w[n][ifs[i]] = w[n].call(null, ifs[i]);
          }
          if (!w[n]._t) {
            x = d.createElement(s), y = d.getElementsByTagName(s)[0];
            x.async = 1;
            x.src = p;
            x.setAttribute('charset','UTF-8');
            y.parentNode.insertBefore(x, y);
            w[n].para = para;
          }
        })({
          sdk_url: '/static/lib/sensorsdata/1.9.7/sensorsdata.min.js',
          heatmap_url: '/static/lib/sensorsdata/1.9.7/heatmap.min.js',
          name: 'sa',
          server_url: '{{ sensor_url | safe }}',
          show_log: 'false'
        });

        // 封装只允许捕获一次事件的函数
        sa.xdTrackOnce = function(event_name, properties, cb) {
            if ( !sa.xdTrackOnce_items ) {
                sa.xdTrackOnce_items = [];
            }
            if ( sa.xdTrackOnce_items.indexOf(event_name) < 0) {
                sa.track(event_name, properties, cb);
                sa.xdTrackOnce_items.push(event_name);
            }
        }

        // 获取服务器匿名id
        var _distinct_id = '{% if distinct_id %}{{ distinct_id }}{% elif user %}{{ user.distinct_id  }}{% elif _openid %}{{ _openid }}{% endif %}';
        if (_distinct_id) {
            sa.identify(_distinct_id, true);
        }
        sa.quick('autoTrack');
    </script>
    <!-- end 公共头部组件 -->
    <link rel="stylesheet" href="/static/lib/swiper/3.4.2/css/swiper.min.css">
    <link rel="stylesheet" href="/static/lib/photoswipe/4.1.2/photoswipe.css">
    <link rel="stylesheet" href="/static/lib/photoswipe/4.1.2/default-skin/default-skin.css">
    <link rel="stylesheet" href="/static/css/mobileWeb/product_detail.css?v=2018112601">
</head>

<body>
    <!-- loading 动画 -->
    <p id="loading-indicator">
        <img src="/static/img/ajax-loader.gif" />
    </p>
    <!-- 内容容器 -->
    <div class="ctn-wrap">

    </div>

    <!-- 加小助理咨询 弹窗 -->
    <div class="xd-popup hide" id="contact">
        <div class="xd-popup-content">   
            <div class="xd-popup-btnClose"></div>
            <img class="contact-qrcode" src="/static/img/mobileWeb/product/assistant_tuan2.png" alt="">
            <p class="contact-text">长按二维码加小助理咨询</p>
        </div>
    </div>

    <!-- xd-pop 弹出框 -->
    <div class="xd-pop clearfix">
        <i class="iconBase iconBase-Icon_Alert"></i>
        <span class="msg"></span>
    </div>
    <!-- photoswipe模板文件 直接include photoswipe_tpl模板   -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
            <div class="pswp__container">
                <!-- don't modify these 3 pswp__item elements, data is added later on -->
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar" style="background: none;">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader-- active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- begin 公共CNZZ统计组件  -->
    <div style="display: none;">
        <script src="https://s22.cnzz.com/z_stat.php?id=1264539208&web_id=1264539208" language="JavaScript"></script>
    </div>
    <!-- end 公共CNZZ统计组件  -->
    <script src="/static/lib/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/lib/swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="/static/lib/jQuery.dotdotdot/3.0.3/jquery.dotdotdot.js"></script>
    <script type="text/javascript" src="/static/lib/photoswipe/4.1.2/photoswipe.min.js"></script>
    <script type="text/javascript" src="/static/lib/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
    <script type="text/javascript" src="/static/lib/photoswipe/4.1.2/photoswipe_config_xindebaby.js"></script>
    <!-- 微信分享 -->
    <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> -->
    <script src="/static/lib/weixinSDK/jweixin-1.3.2.js"></script>
    <script src="/static/js/clipboard.min.js"></script>
    <script>
        $(function () {
            // 加载数据
            var init_timer = setTimeout(function () {
                load_data({ preprocessed: true })
            }, 5000);
            // 微信配置
            wx.config({
                debug: false,
                appId: '{{ app_id }}',
                timestamp: '{{ timestamp }}',
                nonceStr: '{{ noncestr }}',
                signature: '{{ signature }}',
                jsApiList: ['openLocation', 'getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ']
            });

            // 神策追踪浏览事件
            var _tuan_channel = '{{ channel or '' }}';
            var _sensorsdata_tap_order_btn = {
                order_type: '团购',
                gestational_time: {% if gestational_time != None %}{{ gestational_time }}{% else %}null{% endif %}
            };
            if (_tuan_channel) {
                _sensorsdata_tap_order_btn['tuan_channel'] = _tuan_channel;
            };

            //---------------------------------------------------------------
            // 修复移动端点击效果
            document.body.addEventListener('touchstart', function () { });
            // 机型判断,行高调整
            var _isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
            if (_isAndroid) {
                $(document.body).addClass('android');
            }
            wx.ready(function () {
                wx.getLocation({
                    type: 'gcj02',
                    success: function (res) {
                        load_data({ latitude: res.latitude, longitude: res.longitude, preprocessed: true });
                    },
                    fail: function (res) {
                        load_data({ preprocessed: true });
                    },
                    cancel: function (res) {
                        load_data({ preprocessed: true });
                    }
                });
                wx.onMenuShareAppMessage({
                    title: '{{ title }}',
                    desc: '{% if product.start_special %}{% if product.special_start_time > now %}限时抢购价:{{ product.special_price | filter_price_decimal }}元,稍后开抢{% else %}限时抢购价:{{ product.special_price | filter_price_decimal }}元,火爆抢购中{% endif %}{% else %}{% if product.subtitle %}{{ product.subtitle }},{% endif %}{{ product.count }}人团:{{ (product.price - (product.count - 1) * product.delta) | int }}元{% endif %}',
                    link: '{{ share_url | safe }}',
                    imgUrl: '{{product.cover_url|avatar_160}}',
                    type: 'link',
                    success: function () {
                    },
                    cancel: function () {
                    }
                });
                wx.onMenuShareTimeline({
                    title: '{{ title }}',
                    link: '{{ share_url | safe }}',
                    imgUrl: '{{product.cover_url|avatar_160}}',
                    success: function () {
                    },
                    cancel: function () {
                    }
                });
                wx.onMenuShareQQ({
                    title: '{{ title }}',
                    desc: '{% if product.start_special %}{% if product.special_start_time > now %}限时抢购价:{{ product.special_price | filter_price_decimal }}元,稍后开抢{% else %}限时抢购价:{{ product.special_price | filter_price_decimal }}元,火爆抢购中{% endif %}{% else %}{% if product.subtitle %}{{ product.subtitle }},{% endif %}{{ product.count }}人团:{{ (product.price - (product.count - 1) * product.delta) | int }}元{% endif %}',
                    link: '{{ share_url | safe }}',
                    imgUrl: '{{product.cover_url|avatar_160}}',
                    success: function () {
                    },
                    cancel: function () {
                    }
                });
            });
            wx.error(function (res) {
                // load_data({ preprocessed: true });
            });
            

            function load_data(params) {
                clearTimeout(init_timer);
                $.get("", params).done(function (data) {
                    $('.ctn-wrap').html();
                    $('.ctn-wrap').append(data);
                    $('#loading-indicator').remove();
                    pageInit();
                });
            };
            // 页面初始化工作
            function pageInit() {

                sa.trackLink($('.buy')[0], 'tap_order_btn', _sensorsdata_tap_order_btn);

                _photoSwipe_init_userNote();

                // banner滚动效果
                if ($('.cover-item').length > 1) {
                    var mySwiperBanner = new Swiper ('#productCover', {
                        slidesPerView: 1,
                        pagination : '.swiper-pagination',
                    })
                }

                // 多行文本截断
                $('.dotdotdot').dotdotdot({
                    truncate: "letter",
                    keep: '.toggle'
                });

                // 商户地址隐藏效果
                if ($('.providerAddr .addr-item').length > 3) {
                    var maskFullH = $('.xd-mask-ctn').height();
                    var maskMinH = $('.providerAddr .addr-item').eq(0).height() + $('.providerAddr .addr-item').eq(1).height() + $('.providerAddr .addr-item').eq(2).height()

                    $('.xd-mask-ctn').css('max-height', maskMinH + 'px');
                    $('.providerAddr').addClass('xd-mask-active');
                }
                // 展示部分隐藏-出现效果
                $('.xd-mask-tool').on('click', function() {
                    $('.xd-mask').toggleClass('xd-mask-full');
                    if ($('.xd-mask').hasClass('xd-mask-full')) {
                        $('.xd-mask-ctn').css('max-height', maskFullH + 'px');
                        setTimeout(function() {
                            $('.xd-mask-mask').addClass('xd-mask-leave');
                        }, 200)
                        setTimeout(function() {
                            $('.xd-mask-mask').css('display','none');
                        }, 700)
                    } else {
                        $('.xd-mask-mask').css('display','block');
                        $('.xd-mask-ctn').css('max-height', maskMinH + 'px');
                        setTimeout(function() {
                            $('.xd-mask-mask').removeClass('xd-mask-leave');
                        }, 200)
                    }
                })

                // 商品介绍展开
                $('.productDetail .detail-more').on('click', function () {
                    $('.productDetail').removeClass('mask-active');
                })

                // 打开地图
                $('.addr-item.ll').on('click', function (event) {
                    var self = $(event.target)
                    var data = self.data.bind(self);
                    wx.openLocation({
                        latitude: data('latitude'), // 纬度,浮点数,范围为90 ~ -90
                        longitude: data('longitude'), // 经度,浮点数,范围为180 ~ -180。
                        name: data('name'), // 位置名
                        address: data('address'), // 地址详情说明
                        scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                    return false;
                })

                // 联系客服,打开弹窗
                $('.advisory').on('click', function() {
                    var qrcodeurl = $(this).data("qrcodeurl");
                    var desc = $(this).data("desc");
                    $(".contact-text").text(desc);
                    $(".contact-qrcode").attr("src", qrcodeurl);
                    $('#contact').removeClass('hide');
                })

                // 关闭弹窗按钮
                $('.xd-popup-btnClose').on('click', function() {
                    $('#contact').addClass('hide');
                })
                // 禁止弹窗底部内容滚动
                $('.xd-popup').on('touchmove', function() {
                    return false;
                })
                // 禁止弹窗底部内容滚动
                $('.ctn-wrap').on('touchmove','.layer-box,.layer-cont,.layer-rel-cont', function(e) {
                    e.stopPropagation();
                    return false;
                })
                $('.ctn-wrap').on('click','.pr-auth-img', function(e) {
                    $('.layer-box').fadeIn(300);
                    e.stopPropagation();
                    return false;
                })
                $('.ctn-wrap').on('click','.layer-close', function() {
                    $('.layer-box').fadeOut(300);
                })


                // 活动开始提醒------------------------------------
                // subscribed为True。则代表用户订阅
                var subscribed = '{{ user and user.subscribed }}';//是否关注过公众号
                var is_subscribed = '{{ is_notice }}';//是否订阅过消息提醒
                var is_remind=false;//本次访问是否已发送提醒

                if(is_subscribed == 'True'){
                    $('#remind-btn').css('display','none');
                    $('#remind-suc-btn').css('display','flex');
                    is_remind=true;
                }else{
                    $('#remind-btn').css('display','flex');
                    $('#remind-suc-btn').css('display','none');
                }
                $('.ctn-wrap').on('click','#remind-suc-btn,#remind-btn',function(){
                    var remind_api=$(this).data('url');
                    if(is_subscribed == 'True'){
                        $('.remind-title').html('已订阅提醒');
                        $('.remind-xcx-title').html('已订阅提醒');
                        $('.remind-suc-title').html('已订阅提醒');
                    }
                    if(subscribed == 'True'){//用户已关注过公众号
                        $('.remind-h5').css('display','none');
                        $('.remind-xcx').css('display','none');
                        $('.remind-success').css('display','block');
                        $('.remind-suc-btn').html('关闭(3)');
                        var suc_timer = setInterval(remindTimer,1000);
                        var remind_num = 2;
                        function remindTimer(){
                            if(remind_num <= 0){
                                clearInterval(suc_timer);//回收倒计时
                                $('.remind-box').fadeOut(300);
                            }else{
                                var remind_html='关闭('+remind_num+')';
                                $('.remind-suc-btn').html(remind_html);
                                remind_num--; 
                            }
                        }
                        $('.ctn-wrap').on('click','.remind-suc-close,.remind-suc-btn,.remind-box', function() {
                            $('.remind-box').fadeOut(300);
                            clearInterval(suc_timer);
                        })
                    }else{
                        // 判断网页是不是在小程序中
                        wx.miniProgram.getEnv(function(res2) { 
                            if ( res2.miniprogram ) {
                                $('.remind-h5').css('display','none');
                                $('.remind-success').css('display','none');
                                $('.remind-xcx').css('display','block');
                            } else {
                                $('.remind-h5').css('display','block');
                                $('.remind-success').css('display','none');
                                $('.remind-xcx').css('display','none');
                            }
                        }) 
                    }
                    $('.remind-box').fadeIn(300);
                    $('#remind-btn').css('display','none');
                    $('#remind-suc-btn').css('display','block');
                    is_subscribed = 'True';
                    if(!is_remind){
                        is_remind=true;
                        $.ajax({
                            type: 'GET',
                            url:remind_api,
                            contentType: 'application/json',
                            dataType: 'json',
                            async: false,
                            // data:JSON.stringify(ajaxData),
                            success: function(res) {
                                console.log(res);
                            },
                            error: function(res) {
                                // console.log(res);
                            }
                        });
                    }
                })
                // 禁止弹窗底部内容滚动
                $('.ctn-wrap').on('touchmove','.remind-box,.remind-cont,.remind-rel-cont', function(e) {
                    e.stopPropagation();
                    return false;
                })
                $('.ctn-wrap').on('click','.remind-cont', function(e) {
                    e.stopPropagation();
                    return false;
                })
                $('.ctn-wrap').on('click','.remind-close,.remind-box', function() {
                    $('.remind-box').fadeOut(300);
                })
                var clipboard = new ClipboardJS('#copybtn');
                clipboard.on('success', function(e) {
                    xdPop('复制成功!');
                });
                clipboard.on('error', function(e) {
                    xdPop('复制失败,暂不支持该功能,请手动复制!');
                });

                // 倒计时
                try {
                    {% if product.start_special %}
                        var end_time='';
                        {% if product.special_start_time > now %}
                            end_time='{{ product.special_start_time }}';
                        {% else %}
                            end_time='{{ product.special_end_time }}';
                        {% endif %}
                        console.log(end_time);
                        var timer;
                            timer = setTimeout(countTime,1000);
                        function countTime () {  
                            let dd='';
                            let hh='';
                            let mm='';
                            let ss='';
                            let hs='';
                            //获取当前时间  
                            let date = new Date();  
                            let now = date.getTime();  
                            //设置截止时间  
                            let endtime=end_time.replace(/-/g, '/');
                            let endDate = new Date(endtime);  
                            let end = endDate.getTime();  
                            //时间差  
                            let leftTime = end-now;  
                            //定义变量 d,h,m,s保存倒计时的时间
                            if (leftTime>=0) {  
                                dd = checkTime(Math.floor(leftTime/1000/60/60/24));  
                                hh = checkTime(Math.floor(leftTime/1000/60/60%24));  
                                mm = checkTime(Math.floor(leftTime/1000/60%60));  
                                ss = checkTime(Math.floor(leftTime/1000%60)); 
                                hs = checkTime(Math.floor(leftTime%1000));
                                // console.log(dd+'天'+hh+'时'+mm+'分'+ss+'秒');
                                if(dd >= 1){
                                    let time_html='<span class="time-num dinCondBold">'+dd+'</span><span class="time-nuit">天</span><span class="time-num dinCondBold">'+hh+'</span><span class="time-mh">:</span><span class="time-num dinCondBold">'+mm+'</span><span class="time-mh">:</span><span class="time-num dinCondBold">'+ss+'</span>';
                                    $('.bulk-time').html(time_html);
                                }else{
                                    let time_html='<span class="time-num dinCondBold">'+hh+'</span><span class="time-mh">:</span><span class="time-num dinCondBold">'+mm+'</span><span class="time-mh">:</span><span class="time-num dinCondBold">'+ss+'</span>';
                                    $('.bulk-time').html(time_html);
                                }
                                
                                timer=setTimeout(countTime,1000);
                            }else{
                                clearTimeout(timer);//回收倒计时
                                window.location.reload();
                            }
                            //将倒计时赋值到div中   

                        }
                        function checkTime(i){ //将0-9的数字前面加上0,例1变为01 
                          if(i<10) 
                          { 
                            i = "0" + i; 
                          } else if(i>=100){
                            i=Math.round(i/10);
                            if(i==100){//100时有bug
                              i='00';
                            }
                          }
                          return i; 
                        }
                    {% endif %}
                }
                catch(err) {
                    console.log(err);
                }
                
            }
            // 通过 rem 计算 px
            function toPx(rem) {
                return rem * _rootFontsize;
            }
            // xd-pop 弹出框脚本
            function xdPop(msg) {
                var $xdPop = $('.xd-pop');
                if (!$xdPop.hasClass('show')) {
                    $('.xd-pop').addClass('show').find('.msg').text(msg);
                    setTimeout(function () {
                        $('.xd-pop').addClass('active');
                    }, 200)
                    setTimeout(function () {
                        $('.xd-pop').removeClass('active');
                    }, 1700)
                    setTimeout(function () {
                        $('.xd-pop').removeClass('show');
                    }, 2200)
                }
            }


            
        })
            </script>
</body>

</html>
与阳光握手言和的主页 与阳光握手言和 | 菜鸟二级 | 园豆:373
提问于:2018-11-28 11:44
< >
分享
最佳答案
0

下面那个问题可能是老版ios系统不支持es6的问题,把let换成var 试一下

收获园豆:200
地火水 | 小虾三级 |园豆:1288 | 2018-11-28 12:01

好的👌

与阳光握手言和 | 园豆:373 (菜鸟二级) | 2018-11-28 12:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册