JS如何设置iOS中微信浏览器的title


Posted in Javascript onNovember 22, 2016

说到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都不会改变文本流,也不会触发页面渲染。

以上所述是小编给大家介绍的JS如何设置iOS中微信浏览器的title,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
原生JS查找元素的方法(推荐)
Nov 22 #Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 #Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
You might like
php下连接mssql2005的代码
2011/01/17 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
windows下python安装小白入门教程
2018/09/18 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
详解Python用户登录接口的方法
2019/04/17 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
客服主管岗位职责
2013/12/13 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
酒店员工检讨书
2014/02/18 职场文书
文明寝室申报材料
2014/05/12 职场文书
党员活动总结
2015/02/04 职场文书
同意报考公务员证明
2015/06/17 职场文书
工作简历的自我评价
2019/05/16 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书