工具方法：js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理

于 2024-06-24 17:01:19 发布
阅读量828 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 原生js方法软件工具 文章标签： javascript 哈希算法 开发语言
互帮互助，点赞收藏。一起成长，欢迎互动。
本文链接：https://blog.csdn.net/weixin_44461275/article/details/139931123

工具方法：js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理

Hash路由模式替换地址页面也不更新，History模式正常

处理方案：

在 # 前加随机数或时间戳即可

示例方法：

  onReset(item, index, e) {
    e.stopPropagation();
    const getIframe = document.querySelectorAll('.inner-iframe')[index];
    if (getIframe) {
      // 针对hash路由，尾部添加随机参数不生效，在/#/前添加随机数
      if (item.path.split('?')[0].includes('/#/')) {
        const pathArr = item.path.split('/#/');
        const newPath = `${pathArr[0]}/_t=${Math.random() * 1e18}/#/${pathArr[1]}`;
        getIframe.setAttribute('src', newPath);
      } else {
      	// history 模式在尾部添加。根据实际项目判断是？ 拼接还是 & 拼接
        const newPath = `${item.path}&_t=${Math.random() * 1e18}`;
        getIframe.setAttribute('src', newPath);
      }
    }
  }

效果示例：

原本：https://aa.com/#/bbb

Hash刷新：https://aa.com/_t=374410860055044000/#/bbb

History刷新：https://aa.com/#/bbb?_t=374410860055044000