iphone 上微信的“复制链接”功能复制出来的是修改前的链接
问题描述:
在 iOS 系统中,用微信打开了 A 页面的链接,然后由 A 页面进入 B 页面
在 B 页面打开微信右上角菜单,使用“复制链接”功能
最后粘贴出来的链接是 A 页面的链接
分析原因:
这个问题在微信 6.2 时代就已存在,GitHub 上有很多人到 weui 的主页提 issue
https://github.com/Tencent/weui/issues/125
https://github.com/wuchangming/blog/issues/1
这两个 issue 给了我很大的启发
出现这个问题的原因,是因为微信内置浏览器对 history 的支持不够全面
所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url
只要每个页面都刷新一次,严格的说不能是简单的刷新,需要用 location.replace 刷新页面,就能解决该问题
解决方案:
在使用了 vue-router 的项目中,添加路由守卫
在每次跳转结束的时候,给 URL 添加一个随机参数 wxr,然后执行 location.replace
当 URL 已经有了 wxr 这个参数,就直接加载页面,避免无限刷新
function wxRefresh (to) {
// 在链接后加一个随机参数 wxr,以解决 ios 复制链接的问题
let wxr = 'wxr=' + new Date().getTime();
let url = location.protocol + '//' + location.host + '/page/im' + to.fullPath;
if (location.search) {
url = url + '&' + wxr;
} else {
url = url + '?' + wxr;
}
window.location.replace(url);
} // 跳转结束后校验 wxr 参数
app.router.afterEach((to, from) => {
!to.query.wxr && wxRefresh(to);
});
另外,在页面内需要将 url 还原为正常的地址
可以在 vuex 或者第三方 js 中添加一个公用方法
setCurrentUrl: () => {
// 删除 url 中手动添加的随机数 wxr
let url = location.href.replace(/&wxr=[-]{}/g, '');
window.history.replaceState({}, document.title, url);
}
然后在 mounted 或者 created 中调用这个方法就好了
iphone 上微信的“复制链接”功能复制出来的是修改前的链接的更多相关文章
- 几何服务,cut功能,输入要素target(修改前)内容。
几何服务,cut功能测试,输入要素target(修改前)内容. {"geometryType":"esriGeometryPolyline","geo ...
- vue+element-ui 项目中实现复制文字链接功能
需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 安装 npm i clipboard --save HTML <template ...
- demo:复制粘贴功能
复制链接功能,也是为了方便用户一键"复制",粘贴链接和文本到指定位置,在此,接着上一篇"demo:生成专属二维码link "来记录一键"复制" ...
- Android仿iPhone晃动撤销输入功能(微信摇一摇功能)
重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...
- Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)
在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...
- js实现点击按钮复制文本功能
最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...
- js禁用页面上右键菜单、选中和复制
有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
- 【转载】 C#通过File类实现文件拷贝复制的功能
在Windows系统的使用过程中,一个较常使用的功能就是文件的复制拷贝操作,其实在C#开发中,也可以使用File类库中的Copy方法来实现文件的拷贝,支持设定原文件地址,以及拷贝复制后的文件存放路径. ...
随机推荐
- mac下安装安卓开发环境
对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...
- Lerning Entity Framework 6 ------ Handling concurrency With SQL Server Database
The default Way to handle concurrency of Entity Framework is using optimistic concurrency. When two ...
- Python脱产8期 Day014 2019/4/28
一 带参装饰器 1.通常,装饰器为被装饰的函数添加新功能,需要外界的参数 # -- outer参数固定一个,就是func # -- inner参数固定同被装饰的函数,也不能添加新参数 # -- 可以借 ...
- 第二十七节:Java基础面向对象-静态,单例模式,继承详情知识点
前言 Java基础面向对象-静态,单例模式,继承详情知识点.静态-static关键字,static变量,静态代码块,代码块(不加静态),对象创建过程,单例模式,继承. 静态-static关键字 // ...
- Java学习笔记30(集合框架四:List接口)
List接口继承自Collection接口 具有重要的三大特点: 1.有序集合:存入和取出的顺序一致 2.此接口的用户可以对列表中每个元素插入位置精确的控制:可以通过索引操作 3.可以存储重复元素 L ...
- ElasticSearch权威指南学习(分布式集群)
空集群 只有一个空节点的集群 一个节点(node)就是一个Elasticsearch实例,而一个集群(cluster)由一个或多个节点组成,它们具有相同的cluster.name,它们协同工作,分享数 ...
- 用Nginx搭建IIS集群实现负载均衡
长话短说,我们用Nginx来搭建一个简单的集群,实现Web应用的负载均衡,架构图如下: 两台Web服务器,一台静态资源服务器,因为是演示,我们以网站形式部署在本机IIS中 一台Nginx代理服务器,安 ...
- vue 去哪网项目 学习笔记(一)
启动项 mian.js 是整个项目的入口程序 定义局部组建 components 是定义的局部组建 template 渲染app里的内容 单文件组建 单文件组建是以vue 结尾的内容 app组建的内容 ...
- Xamarin.Android 使用 Encoding.GetEncoding("GB2312") 报错解决方案
问题描述:使用byte转换成汉字编码格式,debug模式下可以正常运行,但是release模式下就会出现死机问题. 排除过程:最开始不知道是编码格式转换错误,于是把相关代码块注释掉,然后进行relea ...
- Mongoose基础
为了保存网站的用户数据和业务数据,通常需要一个**数据库**.**MongoDB**和**Node.js**特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二 ...