在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. Android 8.0 的部分坑及对应解决方法

    虽然 Android 9.0 都已经面世了,本篇文章写的有点迟了. 但是迟到好过不到,因此基于此这边还是记录一下项目中遇到的 Android 8.0 的坑及对应解决方法. 每次系统升级,虽然系统功能更 ...

  2. Excel自动换行、Export2Excel 自动换行

    1需求:导出excel后自动换行显示. 2插件:Export2Excel 3.测试 listToExcel() { import('@/vendor/Export2Excel').then(excel ...

  3. 清理mac的硬盘空间,清理Xcode,清除“其他”

    下面是一些清理的方法:打开Finder使用快捷键command+shift+g输入路径即可进入该文件夹 1. 移除DerivedData,建议定期清理,会重新生成 此文件夹内是模拟器运行每个APP生成 ...

  4. Android为TV端助力:UDP协议(接收组播和单播)

    private static String MulticastHost="224.9.9.98";private static int POST=19999;private sta ...

  5. Play vue.js with constant value in SailsJS

    SailsJS supplies a utility module called parasails, which defines two elements, <ajax-form> an ...

  6. 只需一行代码!Python中9大时间序列预测模型

    在时间序列问题上,机器学习被广泛应用于分类和预测问题.当有预测模型来预测未知变量时,在时间充当独立变量和目标因变量的情况下,时间序列预测就出现了. 预测值可以是潜在雇员的工资或银行账户持有人的信用评分 ...

  7. IIS发布的网站,内网和外网不能访问的解决办法

    A.关闭防火墙.控制面板-Windows防火墙-打开或关闭Windows防火墙(不推荐) B.打开:控制面板-Windows防火墙-高级设置-入站规则,在入站规则窗口中找到”BranchCache内容 ...

  8. SQL Server中将多行数据拼接为一行数据(一个字符串)

    表A中id与表B中aid为一对多的关系 例如: 表A: id name a1 tom a2 lily a3 lucy 表B: id aid value b1 a1 B1 b2 a1 B2 b3 a2 ...

  9. docker镜像和容器的导出导入

    本文介绍docker镜像和容器的导入导出,用于迁移.备份.升级等场景.主要用到export.import.save.load四个方法. 原文地址:代码汇个人博客 http://www.codehui. ...

  10. 功能测试话题分享-0323 Bug