重新加载页面但不要在 IE 中滚动到顶部

Question

您好，我有一张大表要管理。当我单击按钮时，我使用

$.post("update_the_database.php", { mode: 'themode', username: username },
            function(result){
                window.location.href = window.location.href;
        });

这会在后台运行"update_the_database.php"，然后在完成后重新加载页面。它会回到页面顶部...

我试过了：

window.location.href = window.location.href + '#the_id';

但在所有浏览器（IE、Firefox、Chrome、Safari）中，它会更改地址栏中的 URL，但不会重新加载页面。

从这里开始：

Difference between window.location.href=window.location.href and window.location.reload()

“window.location.href=window.location.href 如果 URL 中有锚点 (#) 将不会重新加载页面 - 在这种情况下您必须使用 window.location.reload()。”

所以我尝试了：

window.location.reload(true);

它会重新加载页面并向下滚动到 Chrome 和 Safari 中的上一个位置，而不是 IE 和 Firefox...

How to force a page to reload if all what was changed in url is hash?

方法 #2：

window.location.hash = "#" + newhash;
window.location.reload(true);

现在它可以在 Firefox 中运行...

顺便说一句，如果我使用 window.location.reload(true);在 IE 中会出现：

Windows Internet Explorer

To display the webpage again, the web browser needs to
resend the information you've previously submitted.

If you were making a purchase, you should click Cancel to
avoid a duplicate transaction. Otherwise, click Retry to display
the webpage again.

Retry   Cancel   

您必须按“重试”，否则会出现错误页面，显示“网页已过期”。

为了避免我目前正在做的 IE 弹出窗口：

                window.location.hash = "#<?php echo $id;?>";
                if (navigator.appName != 'Microsoft Internet Explorer') {
                    window.location.reload(true);
                }

虽然它只是将哈希值放入地址栏中，并且即使我转到地址栏并按 Enter 也不会刷新页面。我必须删除哈希并按 Enter 重新加载页面...（然后滚动到顶部）

Answer 1

我能想到的唯一技巧是保存window.scrollY 指示的滚动位置并将其传递给下一个请求（例如：使用查询字符串）。然后你创建一个检查这个键是否存在的代码，使用window.scrollTo(0, lastPos)跳转到那个位置。如果您不使用任何 javascript 框架，它并不漂亮并且需要大量代码（并且会弄脏您的查询字符串）。

如果您这样做是为了定期更新数据，也许值得重新设计代码以进行 ajax 更新。

Answer 2

对于正则表达式的例子，你知道当你用正则表达式解决问题时他们会说什么！

    if(window.location.hash){
window.location.href = window.location.href.replace(window.location.hash,"#mynewhash");}

window.location.hash 将包含

URL 中 # 符号之后的部分，包括 # 符号。 您可以监听 hashchange 事件以获取更改通知 支持浏览器的哈希值。

见mozilla docs

Answer 3

而不是每次都使用 window.location.href 附加“#id”，这会在您的情况下导致问题，因为编码时间 window.location.href 已经包含一个 id，并且您将另一个 id 附加到它。 在 window.location.href 上使用正则表达式 '/^(.*)#/is' 在重新加载之前找到实际的 url。现在使用您编写的逻辑，即

$.post("update_the_database.php", { mode: 'themode', username: username },
        function(result){
            var str = window.location.href;
            var patt1 = /^(.*)#/;
            window.location.href = patt1.exec(str)[1];
            window.location.href = window.location.href + '#the_id'
        }
}