在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. Java基础之 反射是什么?

    什么是反射,反射能干嘛? 反射是:指程序可以访问.检测和修改它本身状态或行为的一种能力 反射是一种能力,所以给的定义就是说明了它能干嘛. 我们平时用反射主要做: 获取类型的相关信息 动态调用方法 动态 ...

  2. Sql万能分页代码

    sql数据库中常用的分页 我做了一个万能的 用的上的小伙伴拿去耍吧 go  ----万能分页代码create procedure [dbo].[sp_datapager] @pagesize int, ...

  3. 2.python中self详解(程序适用于python3版本)

    先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...

  4. ServiceStack.Redis 请求次数6000次异常

    Redis是一个非常NB的内存级的数据库,我们可以把很多”热数据“(即读写非常多的数据)放入其中来操作,这样就减少了和关系型数据库(如SqlServer/My Sql等)之间的交互,程序的响应速度也大 ...

  5. google zxing android扫描优化&解析

    这里先给出zxing包的源码地址 zip包:https://codeload.github.com/zxing/zxing/zip/master Github:https://github.com/z ...

  6. android studio gradle 更新方法。

    Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrapper gradle-wrapper.properties   (只要在打开项目的时候选OK,这个文件就 ...

  7. Android 视频通信,低延时解决方案

    背景: 由于,项目需要,需要进行视频通信,把a的画面,转给b. 运维部署: APP1:编码摄像头采集的数据,并且发送数据到服务端 APP2:从服务端,拉取数据,并且进行解码显示 服务端:接收APP1提 ...

  8. Git的安装与配置

    在安装Git之前,首先要下载Git安装包. 下载地址:https://gitforwindows.org/ 下载完后打开安装:如下步骤                       按着以上步骤安装完成 ...

  9. 20年硅谷技术牛人到访DataPipeline谈:技术如何与业务平衡发展

    导读:技术人员的常态是“左手支持业务签单,右手提升系统性能”,却经常陷入技术和业务该如何平衡发展的困惑?今天,且听一位硅谷牛人分享他的平衡之道. 以个人名誉申请31个国内外技术和产品专利,中国最佳CT ...

  10. 一条命令解决: sql server 2008 安装提示重启计算机

    0.将安装的iso文件解压 1. 使用管理员账户打开 cmd命令行 2.将命令行的路径切换到解压路径下,你应该可以看到setup.exe 3.执行命令  一条命令解决:setup.exe /SkipR ...