<!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>
如题,部分ios系统版本较低的手机,目前已知iphone 6s、iPhone 6plus手机上,运行在微信浏览器中的部分页面渲染不出来,白屏;挨个把页面所有东西都删了,发现只要用了link标签引入css,哪怕这个css文件是空的,原本的dom就无法显示了,由于是客户反馈的,找了几部同款手机但是系统是最新的,并没有复现,还是第一次遇到这个问题,没有头绪。。。。。。。。。
还有一个情况也是类似的,也是这两个机型,原本用户能正常访问页面,但是自从加了一个时间倒计时效果,js就不执行了,,,,,之所以说js不执行,是因为js的第一行代码就是移除loading元素,而这2款机型一直显示loading图片。。。。。一开始觉得是倒计时问题,加了try catch,把setInterval换成setTimeout都没用
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/717/viewspace-3156752/ ,如需转载,请注明出处,否则将追究法律责任。