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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JavaScript运算符小结
Jun 03 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JavaScript插件Tab选项卡效果
Nov 14 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
vue a标签点击实现赋值方式
Sep 07 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
第一节--面向对象编程
2006/11/16 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jQuery事件用法详解
2016/10/06 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python如何导入依赖包
2020/07/13 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
家长学校工作方案
2014/05/07 职场文书
庆七一活动总结
2014/08/27 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
护理专业自荐信范文
2015/03/06 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
幼儿园见习总结
2015/06/23 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL