在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失效)的更多相关文章

  1. ios如何动态改变title

    刚刚用vue发现document.title=title在ios上并不能动态改变title(iphone上的微信端),但是在电脑上和安卓手机上却没有问题,仔细查了一下原来是ios存在title不刷新的 ...

  2. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

  3. jquery easyui datagrid动态改变title的值

    title:'<input type="text" id="txtTitle1" style="background:none;border:n ...

  4. 小程序踩坑之不同屏幕下动态改变translate值

    案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...

  5. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  6. 浏览器title失去焦点时改变title

    document.addEventListener('visibilitychange', function() { var isHidden = document.hidden; if (isHid ...

  7. 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

    开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...

  8. 动态改变UIPopupList选项(NGUI)

    NGUI的UIPopupList 可以通过修改items属性来动态改变菜单选项: public class popListvahnge : MonoBehaviour { public UIPopup ...

  9. ios下虚拟键盘出现"搜索"字样

    最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...

随机推荐

  1. Mac实用技巧之:访达/Finder

    更多Mac实用技巧系列文章请访问我的博客:Mac实用技巧系列文章 Finder就相当于windows XP系统的『我的电脑』或win7/win10系统里的『计算机』(打开后叫资源管理器),find是查 ...

  2. centos安装jenkins

    1.安装jdk yum install java java -version 2.安装jenkins 添加Jenkins库到yum库,Jenkins将从这里下载安装. wget -O /etc/yum ...

  3. java的设计模式 - 静态工厂方法

    静态工厂方法,也不知道为何叫这个名字.其实也就是一个静态函数,可以替代构造函数用.大名鼎鼎的 guava 就大量使用这种模式,这是非常有用的模式. 比如是 Integer i = Integer.va ...

  4. Java 平台无关性的基石

    Java 在刚刚诞生之初就提出过一个非常著名的口号:"一次编写,到处运行", 这句话充分表达了软件开发人员对冲破平台界限的渴望 在竞争激烈的 IT 领域,各种不同的硬件体系结构和不 ...

  5. Vue 无限滚动加载指令

    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度.  反正结 ...

  6. Git日常须知

    基本操作: git init 初始化环境 git add . 管理文件 git status 查看状态 git diff 文件名 查看修改内容 git commit -m '' 提交文件 git lo ...

  7. java工作流引擎Jflow父子流程demo

    关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow  .net开源工作流 定义 一个流程A的一个节点,因工作的需要调起另外的流程B,A就叫父流程,B就叫子流程.如果流 ...

  8. Android MVP

    大家先看看目录结构 先看V层 View里面我写了一个接口LoginView 然后,在登录这个Activity 去实现这个接口,并实现其抽象方法.即看LoginActivity onCreate中引用了 ...

  9. Vue源码实现

    链接1:https://www.cnblogs.com/tiedaweishao/p/8933153.html 链接2:https://www.cnblogs.com/erbingbing/p/647 ...

  10. MyDAL - .QueryListAsync() 使用

    索引: 目录索引 一.API 列表 .QueryListAsync() .QueryListAsync<M>() 如: .QueryListAsync<AgentInventoryR ...