vue router 修改title(IOS 下动态改变title失效)
在ios下app 设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的。
在路由配置中添加 meta对象 如:

在路由配置js里面添以下代码
router.afterEach(route => {
    // 从路由的元信息中获取 title 属性
    if (route.meta.title) {
        document.title = route.meta.title;
        // 如果是 iOS 设备,则使用如下 hack 的写法实现页面标题的更新
        if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
            const hackIframe = document.createElement('iframe');
            hackIframe.style.display = 'none';
            hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
            document.body.appendChild(hackIframe);
            setTimeout(_ => {
                document.body.removeChild(hackIframe)
            }, 300)
        }
    }
});
在static下添加一个空页面

完美解决问题;
摘抄自 :https://segmentfault.com/a/1190000008853962
vue router 修改title(IOS 下动态改变title失效)的更多相关文章
- ios如何动态改变title
		
刚刚用vue发现document.title=title在ios上并不能动态改变title(iphone上的微信端),但是在电脑上和安卓手机上却没有问题,仔细查了一下原来是ios存在title不刷新的 ...
 - 苹果IOS下text-shadow与box-shadow失效的解决办法
		
加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none
 - jquery easyui datagrid动态改变title的值
		
title:'<input type="text" id="txtTitle1" style="background:none;border:n ...
 - 小程序踩坑之不同屏幕下动态改变translate值
		
案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...
 - 关于IOS下click事件委托失效的解决方案
		
一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...
 - 浏览器title失去焦点时改变title
		
document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHid ...
 - 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
		
开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...
 - 动态改变UIPopupList选项(NGUI)
		
NGUI的UIPopupList 可以通过修改items属性来动态改变菜单选项: public class popListvahnge : MonoBehaviour { public UIPopup ...
 - ios下虚拟键盘出现"搜索"字样
		
最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...
 
随机推荐
- C#枚举的简单使用
			
枚举这个名词大家都听过,很多小伙伴也使用过, 那么枚举在开发中能做什么,使用它后能给程序代码带来什么改变,为什么用枚举. 各位看官且坐下,听我一一道来. 为什么使用枚举? 1.枚举能够使代码更加清晰, ...
 - mysql-8.0 安装教程(自定义配置文件,密码方式已修改)
			
下载zip安装包: MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233,进入页面后可以不登录.后 ...
 - Java 合并、拆分PDF文档
			
处理PDF文档时,我们可以通过合并的方式,来任意组几个不同的PDF文件或者通过拆分将一个文件分解成多个子文件,这样的好处是对文档的存储.管理很方便.下面将通过Java程序代码介绍具体的PDF合并.拆分 ...
 - Tomcat的常用内置对象
			
Tomcat的常用内置对象 1.request内置对象 所谓内置对象就是容器已经创建好了的对象,如果收到一个用户的请求就会自动创建一个对象来处理客户端发送的一些信息,这个内置对象就是request.类 ...
 - CentOS下MySQL的安装
			
MySQL数据库是一款比较常用的数据库,大家在练习安装时,可能会遇到各种各样的问题,请大家参考在CentOS系统下MySQL数据库的安装方式.如有任何问题,欢迎留言,本人随时解答. MySQL安装步骤 ...
 - 第十三课 CSS外观及样式的应用 css学习3
			
一.1.color: 文本颜色 预定义文本颜色值,如red,blue等 十六进制的颜色值 #fff白色 建议常用的表示方法 RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,%0 ...
 - ajax和axios、fetch的区别
			
参考文章: https://www.jianshu.com/p/8bc48f8fde75 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题. fetch是用来取代传统的 ...
 - 【土旦】Vue+WebSocket 实现长连接
			
1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...
 - loj#2312. 「HAOI2017」八纵八横(线性基 线段树分治)
			
题意 题目链接 Sol 线性基+线段树分治板子题.. 调起来有点自闭.. #include<bits/stdc++.h> #define fi first #define se secon ...
 - Android AutoCompleteTextView和MultiAutocompleteTextView实现动态自动匹配输入的内容
			
AutoCompleteTextView MultiAutocompleteTextView 这两个控件长的很相似,功能也很相似. AutoCompleteTextView 功能: 动态匹配输入的内容 ...