JS如何设置iOS中微信浏览器的title
更新时间：2016年11月22日 10:23:33 作者：big董
本文给大家分享js设置ios中微信浏览器中的title的解决方法，实现原理比较简单，对js微信浏览器title相关知识感兴趣的朋友一起通过本文学习吧
说到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来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。2011-01-01
这篇文章主要介绍了前端代码规范的重要性以及Vue项目的编码规范,包括组件规范、模板规范、指令规范、标签顺序规范、必须为v-for设置键值、v-show与v-if选择、script标签内部结构顺序、VueRouter规范等具体内容,需要的朋友可以参考下2025-01-01
javascript 动态改变onclick事件触发函数代码
javascript 动态改变onclick事件触发函数代码，需要的朋友可以参考下。2011-08-08
3D幻灯片特效想必大家以不在陌生至于表现形式一般都是拘泥于传统接下来为大家介绍下使用css3 transform配合js以及html实现3D幻灯片特效2013-03-03
这篇文章主要给大家介绍了使用JS如何制作简单的ASCII图与单极图的相关资料，文中介绍的非常详细，并在文末给出了详细的示例代码，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了微信小程序如何播放腾讯视频的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本文主要介绍了javascript实现行号显示的文本框效果，这样就可以解决读者很难迅速找到所在某一行的对应代码，感兴趣的小伙伴们可以参考一下2015-10-10
SyntaxHighlighter是一个使用JavaScript编写的支持多种编程语言语法高亮的JS插件，很多大型网站或博客都在使用。现在给大家介绍一下如何让它自动识别加载我们添加的代码语言2017-02-02
requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。本文主要对require.js的使用与工作原理进行系统介绍。需要的朋友来看下吧2016-12-12
让多个异步任务按照我们的想法执行，是开发中常见的需求，今天我们就来捋一下，如何让多个异步任务并行，串行，以及并行串行相结合，感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论