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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
Javascript动画效果(4)
Oct 11 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
es6函数之尾调用优化实例分析
Apr 25 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP 透明水印生成代码
2012/08/27 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
详解javascript void(0)
2020/07/13 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python中的装饰器用法详解
2015/01/14 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
理货员的岗位职责
2013/11/23 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
cypress测试本地web应用
2022/06/01 Javascript