Django中GET/JS跳转后返回页面需双击返回按钮的问题

问题情况 #

我试了两种跳转到用户详情页的方式，都碰到同一个坑：点击浏览器返回按钮得双击才能回到上一页：

• GET请求方案：用select的onChange事件提交GET表单，跳转到对应slug的用户详情页。返回时会先从mypath/user1跳到mypath/user1?，再点一次才能回到原页面，这个带?的路径完全没用。
• JavaScript方案：去掉表单的method="GET"，用window.location.href = my_url跳转。返回时会先停在相同的mypath/user1，再点一次才回到原页面。

已经优化过视图层的get_object方法，但问题还是没解决，怀疑是Django相关的问题。

原因分析 #

1. GET表单方案：当select触发表单提交时，表单里没有其他参数，提交后浏览器会生成带?的URL，这条请求也被记录在历史栈里，导致返回时多了一条无效记录。
2. JS方案：用window.location.href会在历史栈里新增一条记录，如果跳转逻辑不小心重复执行了（比如页面加载时多次触发），就会出现两条相同的URL记录，返回时得点两次。

解决方案 #

修复GET表单方案 #

别直接提交空GET表单，改成用JS监听select变化，直接构造干净的URL跳转，避免生成带?的无效请求：

<select id="user-select">
  <option value="user1">用户1</option>
  <option value="user2">用户2</option>
</select>

<script>
document.getElementById('user-select').addEventListener('change', function() {
  const slug = this.value;
  // 用replace替换当前历史记录，不会新增条目
  window.location.replace(`/mypath/${slug}`);
});
</script>

修复JS跳转方案 #

把window.location.href换成window.location.replace()，这个方法会替换当前的历史记录条目，而不是新增一条，这样历史栈里就不会有重复的URL：

// 原来的写法
// window.location.href = `/mypath/${slug}`;

// 改成这个
window.location.replace(`/mypath/${slug}`);

同时检查页面里有没有重复执行跳转的逻辑，比如DOMContentLoaded事件被多次绑定，或者模板渲染时重复输出了跳转脚本。

Django视图层辅助检查 #

确保ProfileView的get方法没有额外的重定向操作，比如不要在get_object之后再返回HttpResponseRedirect，避免额外生成历史记录：

from django.views.generic import DetailView
from .models import Profile

class ProfileView(DetailView):
    model = Profile
    slug_field = 'slug'
    slug_url_kwarg = 'slug'
    template_name = 'profile/detail.html'

    def get_object(self, queryset=None):
        obj = super().get_object(queryset)
        # 这里只处理业务逻辑，不要加重定向
        return obj

验证方法 #

跳转后打开浏览器历史记录（比如Chrome按Ctrl+H），确认目标URL只出现一次，这时点击返回按钮应该就能直接回到上一页了。

内容的提问来源于stack exchange，提问作者stats con chris