zoukankan      html  css  js  c++  java
  • 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=[0-9]{13}/g, '');
        window.history.replaceState({}, document.title, url);
    }

    然后在 mounted 或者 created 中调用这个方法就好了

  • 相关阅读:
    node 搭建代理服务器
    jquery常见的方法
    静态布局字体标签
    ajax简单了解
    GET方式缓存清除
    Ajax使用概述
    SESSION技术
    COOKIE技术
    PHP操作数据库(二)-增删改查操作
    PHP操作数据库(一)-步骤介绍
  • 原文地址:https://www.cnblogs.com/wisewrong/p/9689897.html
Copyright © 2011-2022 走看看