ios微信分享设置title怎么弄?在微信里面分享是一个很重要的功能,而title决定着你的分享会不会有人看看。那么ios微信分享时如何设置title。下面和小编一起看看ios微信分享设置title怎么弄?
ios微信分享设置title怎么弄?
说到web前端,浏览器差异是不可回避的问题,这次的问题如下:
单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。常规做法如下,可惜在iOS微信浏览器无效。
document.title = "the title you want to set";1
解决方法:
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);12345678
原理比较简单,之前是因为微信浏览器首次加载页面初始化title后,就再也不监听
document.title的change事件。而这里修改title之后,给微信页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title。
该方法不是原创,出处很多。
问题要是单纯这样,我就不会半夜写这篇博客了,经过测试可得,在iframe加载和删除的时候,iOS页面会有几毫秒的闪动(有灰色的框),Android直接有灰色的框出现在页面不消失。
一开始并没有发现问题出在这里,后来通过git版本回退比较,才定位到问题。既然是因为这个iframe显示和隐藏给页面显示造成了影响,那一开始加载iframe的时候,就将该iframe的样式设置为:
display: none;1
改进的微信代码如下:
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);12345678
这样就解决了这个问题,同时因为display:none这个设置,iframe是脱离文本流的,那么加载和删除这个iframe都不会改变文本流,也不会触发页面渲染,性能会好一些。
以上就是ios微信分享设置title怎么弄?的全部内容了,总的来说,就是使用js动态修改设置了,更多微信中的问题,欢迎关注微微风哦,感谢大家的支持。
相关推荐: