说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题:
微信导航栏的内容是直接拿的项目中title来设置的。但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title。开始我们使用的做法如下:
document.title = "微信导航栏想要显示的内容";
$("title").text("微信导航栏想要显示的内容");
document.getElementsByTagName("title")[0].innerText = "微信导航栏想要显示的内容"
上面的的方法简单方便,可惜上面的方法在安卓上面设置没有问题,但是iOS微信浏览器是无效。
解决方法:
第一步】:将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式,可以查看:(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】:在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】:登录后台,工具箱里恢复数据管理后台是url/sho
var $body = $('body');
document.title = 'the title you want to set';
var $iframe = $("");
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
原理比较简单,之前是因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件。而这里修改title之后,给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title。但是,在iframe加载和删除的时候,iOS页面会有几毫秒的闪动(有灰色的框),Android直接有灰色的框出现在页面不消失,所以,一开始加载iframe的时候,就将该iframe的样式设置为:display: none;这样就解决了这个问题,同时因为display:none这个设置,iframe是脱离文本流的,那么加载和删除这个iframe都不会改变文本流,也不会触发页面渲染。










