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>
最佳答案
0
下面那个问题可能是老版ios系统不支持es6的问题，把let换成var 试一下
收获园豆：200
好的👌
