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 ...
随机推荐
- 用python写一个北京市的个税计算器
#应纳税的钱:税前收入-5000元(起征点)-专项扣除(五险一金等) #工资个税的计算公式为: #个人所得税=应纳税的钱×适用税率-速算扣除数 ''' 1.全月应纳税所得额不超过3000元: 税率:3 ...
- 中介者模式 调停者 Mediator 行为型 设计模式(二十一)
中介者模式(Mediator) 调度.调停 意图 用一个中介对象(中介者)来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散 而且可以独立地改变它们之间的交互. ...
- 大华门禁SDK二次开发(二)-SignalR应用
经过与大华技术支持的沟通,门禁服务程序已经开发好了,可以正常接收门禁开关事件,可以发送开门命令.基于项目实时性要求,这里使用SignalR实现门禁状态.控制命令的实时传送. 几种场景需求 根据Sign ...
- Python笔记-IO编程
IO在计算机中是指input和output(数据输入与输出),涉及到数据交换(磁盘.网络)的地方就需要IO接口. 输入流input stream是指数据从外面(磁盘.网络服务器)流入内存:输出流out ...
- Parcelable 小记
Parcelable 类,接口类,用于数据的序列化封装.常见的Bundle,Intent类都实现了该类. 实现该类需要实现writeToParcel和describeContents方法,最后还需 ...
- RecycleView的notifyItemRemoved使用注意
转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10116095.html 我们为了移除RecycleView的某一项,会用RecycleView的noti ...
- QT之setstylesheet防止子窗体继承父窗体样式
/* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{ ...
- 我带着小程序和Springboot后端终于战胜了WebSocket!!!胜利( •̀ ω •́ )y
WebSocket项目笔记 1. What is WebSocket? (以下内容来源于百度百科) WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器 ...
- Delphi IfThen语句
function IfThen(AValue: Boolean; const ATrue: string; AFalse: string = ''): string; overload; $[StrU ...
- dom4j创建和解析xml文档
DOM4J解析 特征: 1.JDOM的一种智能分支,它合并了许多超出基本XML文档表示的功能. 2.它使用接口和抽象基本类方法. 3.具有性能优异.灵活性好.功能强大和极端易用的特点. 4.是一个开 ...