Javascript 重新加载页面

Posted

技术标签:

【中文标题】Javascript 重新加载页面【英文标题】:Javascript Reload Page 【发布时间】:2013-04-21 07:27:03 【问题描述】:

为了在不完全重新加载我正在使用的所有内容的情况下重新加载页面:

window.top.location=window.top.location;

但是,当有锚文本时,由于某种原因,这不起作用。在这种情况下,它似乎什么都不做,但更有可能刷新锚点。

有什么解决方法可以重新加载页面(如上)而不重新加载缓存的图像和脚本?

【问题讨论】:

如果有锚点,那么它只会滚动页面以显示第一个 id 与锚点匹配的元素。 注:在不详细介绍 HTTP/1.1 缓存和缓存验证的情况下,通过指定“浏览器是否可以从 its 缓存重新加载页面,可以说接受的答案仅在 javascript 级别有效。”然而,location.reload(false) 并没有阻止所有中间服务器(可能位于客户端和源服务器之间)返回它们的缓存副本。将随机未使用的参数作为随请求提交的查询字符串的一部分提交实际上是在不破坏其他资源缓存的情况下重新加载特定资源的做法。 How to reload a page using Javascript? 的可能重复项 【参考方案1】:

尝试使用location.reload(false)

As MDN says,第二个参数是一个布尔值,表示是否绕过缓存。 false 继续使用缓存,如你所愿。

【讨论】:

仅供参考 window.top.location=window.top.location 仍然更快,但如果有任何锚标签,我会使用 location.reload(false) 这在理论上是一个很好的答案,但并没有解决许多互联网服务提供商存在的问题,这些服务提供商会在浏览器和服务器之间的某处缓存文档。这是 HTTP/1.1 RFC 2616 约束内的合法行为,但它会导致代码更新需要很长时间才能传播给受影响的互联网服务提供商所服务的用户。唯一的解决方案是使用服务器过期标头完全禁用缓存或使用不同的查询字符串,根据 RFC 2616,强制 ISP 从服务器检索新副本。 @Joseph:如果您试图绕过缓存,这肯定是一个重要的细节,但问题是如何绕过缓存缓存。 @icktoofay OP 说他/她想重新加载该页面,但不完全重新加载所有内容。这意味着确实绕过了主页的缓存,而不是页面中使用的资源。在浏览器方面,您的答案非常适合仅重新加载页面而不是其他资源,但是当浏览器尝试重新加载主页时,它不会绕过仍在缓存主页的 ISP。但是通过附加不同的查询字符串,HTTP 规范强制 ISP 使其缓存副本“无效”,并根据需要将主页请求一直发送到服务器。 @Joseph:明白了;你是绝对正确的。我想我忽略了这部分。【参考方案2】:

icktoofay 解释了解决方法,所以我只是解决这个问题:

但是,当有锚文本时,由于某种原因,这不起作用。在这种情况下,它似乎什么也没做,但更有可能是刷新了锚点。

html 5 描述了 Location interface,其中涵盖了对 document.location 的分配。

当调用 assign(url) 方法时,UA 必须解析相对于入口脚本的基本 URL 的参数,如果成功,则必须将浏览上下文导航到指定的 url。

因此,导航操作只会看到绝对 URL,因此仅分配片段与分配与带有片段的页面 URL 相同的绝对 URL 没有区别。

navigate

8 片段标识符:将 URL 解析器算法应用于新资源的绝对 URL 和正在导航的浏览上下文的活动文档的地址。 如果生成的解析 URL 的所有组件(忽略任何片段组件)都是相同的,并且将使用 HTTP GET 或等效方法获取新资源,并且新资源的解析 URL 具有片段不为空的组件(即使它为空),然后导航到该片段标识符并中止这些步骤。

最后,navigating to a fragment identifier 说

当用户代理需要滚动到片段标识符时,它必须使用 CSSOM 视图规范中定义的将元素滚动到视图算法来更改文档的滚动位置,并设置对齐到顶部标志,或者执行一些其他操作,以便引起用户注意文档的指示部分。

【讨论】:

【参考方案3】:

完全确定页面本身已重新加载但其他缓存元素未重新加载的最佳方法是使用随机参数更改 location.search 查询字符串。

例如,

location.search='?'+Math.random();

缓存没有被绕过,所以页面的所有元素都会从缓存中加载,但是主页面本身被强制重新加载,因为 HTTP 需要对每个唯一的查询字符串/location.search 值向服务器发出另一个请求。

如果您的页面本身就是一个使用查询字符串的应用程序(例如 file.cgi?param=xyz&param2=abc...),那么您将不得不附加到查询字符串而不是完全替换它:

if (location.search.length > 1)
location.search+='&'+Math.random();
else
location.search='?'+Math.random();

【讨论】:

这很完美,因为我试图刷新页面而不重新发布它。【参考方案4】:

使用 location.href 可以解决问题 http://www.w3schools.com/jsref/prop_loc_href.asp

【讨论】:

不,这行不通。尝试去example.com/#test。然后运行location.href = location.href;。请注意,当#test 存在时,该代码不会重新加载页面。【参考方案5】:

针对以下情况,我一直在尝试所有这些:我有一个带有微型购物车的复杂页面,客户可以在其中保存带有产品列表的项目。现在我想让客户打开一个新页面来下载报告,同时通过打开手风琴等保持父页面完整。

使用 IE8 仍运行 XP 的客户在打开报告窗口后会出现父页面乱码。编程是在 ASP.NET 中,后面有 VB 代码。这个解决方案对我有用。

Dim proj As String = "<script language=javascript> location.assign('/Projects.aspx');
window.open('Report.aspx?project=" & projid.Text & "&rpt=bill');</script>"
Session.Add("AddCart", idx.ToString("N0"))
Response.Write(proj)

location.assign 用于刷新父页面,window.open 将在新窗口中打开报表。

会话变量用于跟踪应打开哪个手风琴行。这在 Page_Load 中处理

    If Not Page.IsPostBack Then
        LoadProjects()
        If Session("AddCart") IsNot Nothing Then
            Dim idx As Integer = Session("AddCart")
            ProjAccordion.SelectedIndex = idx
            Session.Remove("AddCart")
        ElseIf Session("CopyProj") IsNot Nothing Then
            Dim idx As Integer = Session("CopyProj")
            ProjAccordion.SelectedIndex = idx
            Session.Remove("CopyProj")
        End If
    End If

【讨论】:

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

Javascript 重新加载页面

避免页面重新加载以及使用 Javascript/JQuery 重新加载时 [重复]

防止用户使用 jquery 或 javascript 重新加载页面 [重复]

JavaScript javascript页面重新加载

如何使用javascript重新加载页面[重复]

WKWebView 在不重新加载页面的情况下评估 Javascript