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 ...
随机推荐
- angr学习
0.资料 几个主要的网站 angr的github:https://github.com/angr angr的document:https://docs.angr.io/ angr的api:https: ...
- Linux高级运维 第四章 文件的基本管理和XFS文件系统备份恢复
4.1 Linux系统目录结构和相对/绝对路径 4.1.1系统目录结构 在windows系统中,查看文件先进入相应的盘符,然后进入文件目录 在windows中,它是多根 c:\ d:\ e ...
- nginx系列6:nginx的进程结构
nginx的进程结构 如下图: 通过ps –ef | grep nginx可以看到共有三个进程,一个master进程,两个worker进程. nginx是多进程结构,多进程结构设计是为了保证nginx ...
- 小程序中使用ECharts 异步加载数据
官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-d ...
- Java:配置环境(Mac)——JDK
1.下载JDK 官网 打开后,直接下载最新版本. 选择dmg文件下载 2.开始安装,一直下一步. 3.打开终端,查询安装路径:/usr/libexec/java_home,复制备用. 4.配置Java ...
- 数据库微信特殊表情编码django设置
#settings.py DATABASES = { 'default': { 'OPTIONS': { "init_command":"SET foreign_key_ ...
- C# 直接引用js文件,调js里的数据
C# 直接引用js文件,调js里的数据 引入命名空间 using System.IO; string path = AppDomain.CurrentDomain.BaseDirectory + &q ...
- 记录display:table的使用
兼容性:不兼容IE7 1.左右对齐 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Web Storage:浏览器端数据储存机制
目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...
- maven编译开源项目报enforce错解决
刚下载一个开源项目源码,用maven编译发现报错: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-enforcer-plu ...