问题简介

前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么《前端开发,从入门到放弃》,《Android开发,从入门到改行》之类的,程序员真是个爱自嘲的群体,但我们一定是积极而向上的。

说到web前端,浏览器差异是不可回避的问题,这次的问题(知乎上的讨论)如下:

单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。常规做法如下,可惜在iOS微信浏览器无效。

document.title = "the title you want to set";

解决方法

  var $body = $('body');
document.title = 'the title you want to set';
var $iframe = $("<iframe 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直接有灰色的框出现在页面不消失。

一开始并没有发现问题出在这里,后来通过git版本回退比较,才定位到问题。既然是因为这个iframe显示和隐藏给页面显示造成了影响,那一开始加载iframe的时候,就将该iframe的样式设置为:

display: none;

改进的代码如下:

  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);

这样就解决了这个问题,同时因为display:none这个设置,iframe是脱离文本流的,那么加载和删除这个iframe都不会改变文本流,也不会触发页面渲染,性能会好一些。

最后

我相信前面还有无数的坑,但是一路过来积累的分析问题,解决问题的方法会使我更加自信。年轻人最重要就是脚踏实地,厚积薄发,加油。

改进:js修改iOS微信浏览器的title的更多相关文章

  1. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS判断是否微信浏览器

    JS判断是否微信浏览器 function isWeixinBrowser(){ var ua = navigator.userAgent.toLowerCase(); return (/microme ...

  3. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  4. JS动态更新微信浏览器中的title

    问题: 最近在做一个微信中分享的宣传页,分不同的场景,切换不同的场景时需要设置不同的title,实现的方案很简单,当用户切换场景的时候,修改document对象的title属性,可是在实际测试中,io ...

  5. JS如何区分微信浏览器、QQ浏览器和QQ内置浏览器,解决 ios 无法判断是否为qq浏览器环境的问题 !!!

    原理 通过不同移动端的ua弹窗 获取user-agent 参数包含的信息,进行判断浏览器类型 在Android上 QQ内置环境的ua中有关键字 MQQBrowser, 并且后面包含一个[空白符+QQ] ...

  6. axios ios 微信浏览器session问题

    在ios系统下,微信浏览器使用axios 可能存在seesion不存在的问题,其原因是因为存在跨域 解决方案如下 1.修改域名为同一域名 2.后台允许跨域

  7. 【bug解决】ios微信浏览器中背景音乐无法播放

    我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...

  8. [Debug]IOS微信浏览器不支持form表单的target=_blank

    测试代码如下 <?php echo '<meta name="viewport" content="width=device-width,minimum-sc ...

  9. 如何通过 js 修改微信浏览器的title?

    document.setTitle = function(t) { document.title = t; var i = document.createElement('iframe'); i.sr ...

随机推荐

  1. linux msql

    安装mysql 1.使用rpm 安装mysql 或者使用yum安装 使用rpm 安装 下载 Centos 7 所需要的mysql包 tar -xf 解压整合包 根据依赖 安装 common>li ...

  2. 互联网实习笔记之shell笔记

    linux下面一切都是可以配置的 #vim可以有 .vimrc文件 #------.vimrc开始---- set vb t_vb= set number syntax on set hlsearch ...

  3. c# 远程连接ORACLE数据库

    使用该方法,只需要传入几个必要的参数就可以进行数据库的远程连接测试了,连接成功返回TRUE,失败返回false. 说明: 第一个参数表示你在数据库中的用户,具有可以登录权限的 第二个参数表示用户的密码 ...

  4. ThinkPHP学习遇到的点问题(学习中,持续更新)

    1.__ROOT__变量没有值的问题 今天遇到这个比较变态的问题,可能是我技术比较菜吧,搞了一个多小时,最后发现问题可能出现在 入口文件中定义的APP_NAME的名字和项目的跟目录名称相同了,比如我网 ...

  5. XSHELL使用隧道

    线上系统中,搭建了一个elasticsearch环境,想要访问页面,发现环境的内网中没有windows机器,无法使用浏览器来直接进行web页面的访问,于是直接使用了XSELL中强大的功能"隧 ...

  6. gnuplot使用,操作,保存等教程

    gnuplot绘制图像并保存 对于在Linux下工作的人,如果你经常要画一些二维图和简单的三维图的话,那么,gnuplot无疑是一个非常好的选择,不仅图形漂亮,而且操作简单.当然如果需要质量更高的三维 ...

  7. SVN 服务启动报错 0x8007042a

    服务器环境:Windows Server 2008 R2 企业版,Visual SVNServer 2.6.5 不能签出代码,发现svn服务关闭,手动启动报错: 事件查看器: Error: no li ...

  8. 调试python程序

    pdb 关键步骤 python -m pdb ***.py n 单步

  9. Android 学习第12课,应用出错信息

    应用在运行时,出现的错误信息都会在LogCat中显示 如果调出LogCat ? 菜单:窗口 -> 显示视图 -> 其他 -> LogCat

  10. vs2010设置断点进行调试时不起作用

    1.打开vs2010 2.点击web下的“属性” 3.点击“生成” 4.点击最下方的“高级” 5.在“输出”-调试信息中选择“full”,点击确定按钮即可