js设置ios中微信浏览器的title
来源:互联网 发布:jira 源码 编辑:程序博客网 时间:2024/04/29 08:17
说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题:
微信导航栏的内容是直接拿的项目中title来设置的。但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title。开始我们使用的做法如下:
document.title = "微信导航栏想要显示的内容";
$("title").text("微信导航栏想要显示的内容");
document.getElementsByTagName("title")[0].innerText = "微信导航栏想要显示的内容"
上面的的方法简单方便,可惜上面的方法在安卓上面设置没有问题,但是iOS微信浏览器是无效。
解决方法:
var $body = $('body');
document.title = 'the title you want to set';
var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></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都不会改变文本流,也不会触发页面渲染。
该方法不是原创,只是把网上的内容进行了一次整合。
转载 http://www.jb51.net/article/97936.htm
http://blog.csdn.net/donggx/article/details/53188070
- js设置ios中微信浏览器的title
- js设置ios中微信浏览器的title
- 改进:js修改iOS微信浏览器的title
- JS设置title的样式
- IOS开发 设置UIButton的title
- IOS 开发之设置UIButton的title
- IOS 开发之设置UIButton的title
- IOS 开发之设置UIButton的title
- IOS 开发之设置UIButton的title
- IOS 开发之设置UIButton的title
- ios设置navigationbar.title字体的方法
- iOS 设置self.title的颜色
- js实现浏览器title闪烁
- js动态修改微信浏览器的title
- JS实现浏览器的title闪烁、滚动、声音提示、通知
- 动态设置链接的Title的js方法
- js设置title属性的值的换行问题
- iOS 设置NavigationItem的Title的字体大小和颜色
- Thrift数据类型
- Redis连接报错:DENIED Redis is running in protected mode because protected mode is enabled
- 菜鸟到大神的上位历程,即学即用走向人生巅峰
- Mysql 安装包和Navicat for Mysql客户端及注册机
- 选择合适的数据类型
- js设置ios中微信浏览器的title
- TypeSDK运营功能---渠道登入白名单
- linux学习笔记--iotop命令
- hprose接口性能测试工具-附带源码
- 5-python图像处理opencv(1.读图,显示,转换,存储)
- C# 展开和折叠代码的快捷键
- 【H.264/AVC视频编解码技术详解】
- cer证书的命令导入
- 区别js中name与id的简单方法