重定向并重新加载,即使是同一页面

Posted

技术标签:

【中文标题】重定向并重新加载,即使是同一页面【英文标题】:Redirect AND reload even if same page 【发布时间】:2016-04-01 09:24:37 【问题描述】:

确保页面重定向到另一个页面并确保即使目标页面是当前页面也能刷新页面的最简单/最佳方法是什么。

我在 www.website.com 页面上有一些功能,可将用户重定向到 URL www.website.com/#tag。然后我有一个 onload,即使它检查#tag 的 url 并在该标签存在时执行某些操作。

但是,如果用户已经在页面 www.website.com/#tag 上,则程序会中断。确保通过此功能始终将用户重定向到 www.website.com/#tag 的最佳方法是什么,就好像他们刚从其他页面(比如说 www.google.com)到达该网站一样。

我目前正在重定向:

window.location.replace(www.website.com/#tag);

我知道有一百万种方法可以重新加载页面。我一直在使用:

location.reload();

【问题讨论】:

location.reload(true);,这样缓存的页面就不会投递了。 是否可以简单地调用window.location.replace(www.website.com/#tag);然后调用 location.reload(true);还是函数在替换事件后停止运行? 这可能也有帮助,***.com/a/7632005/2270492 一旦你使用替换,页面将重新加载,之后不会执行任何操作。 好的,我怎样才能得到这两种效果呢? 【参考方案1】:

尝试这样的事情:您可以简单地将哈希附加到它然后重新加载:

 if(window.location.href.indexOf("#tag") == -1)
    window.location.href += "#tag";
    location.reload(true);
    

【讨论】:

【参考方案2】:

在某些情况下,导航到当前位置但使用新的或更改的#anchor 可能会导致浏览器不重新加载页面,而是滚动到锚点。通常这实际上是期望的行为,因为它支持我们熟悉的简单的基于锚的链接。

如果底层路径没有改变,我已经在至少一个应用程序中通过切换到重新加载行为来解决它,同时检查哈希:

var new_path, old_path;
old_path = window.location.origin + window.location.pathname;
window.location.href = location;
new_path = window.location.origin + window.location.pathname;
if (old_path === new_path && window.location.hash.length > 0) 
  window.location.reload();

我不需要处理查询字符串,但window.location.search 会在必要时提供。

【讨论】:

【参考方案3】:

此方法使用jQuery,但原理是,读取我们要更新的属性,如果没有变化,则重新加载而不是设置属性。

// current value of the location href attribute
let currentURL = $(location).attr("href");

// value we intend to change it to
let redirectURL = "https://yellow.brick.road/"

if (currentURL !== redirectURL) 
    $(location).attr("href", redirectURL);
 else 
    location.reload();

【讨论】:

【参考方案4】:

尝试在同一页面上重定向。

window.location.reload(true)

【讨论】:

以上是关于重定向并重新加载,即使是同一页面的主要内容,如果未能解决你的问题,请参考以下文章

角度2:在同一路线上重定向时再次重新加载同一组件

使用哈希标签时防止页面重定向

PHP 标头重定向不会在 IE 中重新加载 <iframe>

重定向到同一页面php后避免表单重新提交[重复]

如何在不重新加载页面的情况下将服务器端重定向到其他页面并仍将 URL 保留在 Nextjs 应用程序中?

如何在不重新加载 HTML 页面的情况下重定向锚标记链接?