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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
window.onload使用指南
Sep 13 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
页面点击小红心js实现代码
May 26 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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/10/09 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python给图像添加噪声具体操作
2019/03/03 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
教师找工作推荐信
2013/11/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL