当页面加载是AJAX历史记录点的结果时,如何检测客户端?

时间:2021-09-10 15:49:39

I'm trying to prevent a "flicker" effect that is occurring on my ASP.NET page which occurs when a user navigates to the page via the browser back button after having navigated away from it. The reason for the flicker is that I'm using an Update Panel which has some content in there on the initial page-load. As a result, when the page is loaded via a back button that initial content is shown very briefly before it is updated with the correct History-aware data.

我试图阻止我的ASP.NET页面上发生的“闪烁”效果,当用户导航离开它时,用户通过浏览器后退按钮导航到该页面时发生这种效果。闪烁的原因是我使用的是更新面板,在初始页面加载时会有一些内容。因此,当通过后退按钮加载页面时,初始内容会在使用正确的历史记录感知数据更新之前非常短暂地显示。

In order to overcome this I am intending on having the updatepanel hidden (display: none) on inital page load and then show it as long as we don't have any history to deal with. The problem is that I can't find out what to check to determine if there's any history. I can see that the Sys.Application has a _history member but when I'm checking it on page init it is null each time.

为了克服这个问题,我打算在初始页面加载时隐藏updatepanel(display:none),然后只要我们没有任何历史记录可以显示它。问题是我无法找出要检查的内容以确定是否有任何历史记录。我可以看到Sys.Application有一个_history成员但是当我在页面init上检查它时,每次都是null。

Does anyone know what I should be checking to determine if there's history to deal with for a page load client-side? And at what point to do it?

有谁知道我应该检查什么以确定是否有历史要处理页面加载客户端?在什么时候这样做?

3 个解决方案

#1


1  

The browser's back button and the functionality that it provides is completely independent of the content of your web page.

浏览器的后退按钮及其提供的功能完全独立于您的网页内容。

One thing you might be able to do is set your location hash when you do an AJAX update. You might be able to detect this when you load a page. I haven't tried it. You should be able to parse out the # portion of the url on the Server Side and see where you are in the AJAX history.

您可以做的一件事是在进行AJAX更新时设置位置哈希。加载页面时,您可能能够检测到这一点。我没试过。您应该能够解析服务器端URL的#部分,并查看您在AJAX历史记录中的位置。

location.hash = 'foo';

#2


0  

Thanks for your response Daniel. I now have a div around my update panel which has its display property set to none. On the Sys.Application's init event I'm checking the window.location.hash value to determine whether the page load is the result of a browser back/forward button click. If it isn't then I'm setting the display property to block, if not I leave it as 'display: none' for the time being.

谢谢你的回复丹尼尔。我现在在我的更新面板上有一个div,它的display属性设置为none。在Sys.Application的init事件中,我正在检查window.location.hash值,以确定页面加载是否是浏览器后退/前进按钮单击的结果。如果不是那么我将display属性设置为阻止,如果不是,我暂时将其保留为'display:none'。

On the server-side in the ScriptManager Navigate event handler which is called as a result of the back button being clicked I'm registering a client script block which sets the display property to block.

在ScriptManager Navigate事件处理程序的服务器端,由于单击后退按钮而调用,我正在注册一个客户端脚本块,它将display属性设置为block。

I've done a bit of testing and seems to work fine and I no longer get the flicker. I would prefer to use one of the MS AJAX client objects to check for history but there we are.

我做了一些测试,似乎工作正常,我不再得到闪烁。我更愿意使用其中一个MS AJAX客户端对象来检查历史记录,但我们确实如此。

#3


0  

Put a hidden input in the page with a blank value, and then on page load set its value. You'll find that when using the back button the page load script will find the value is still set and you can respond accordingly. This takes advantage of browser functionality that preserves form contents between page loads.

将隐藏的输入放在页面中,并带有空白值,然后在页面加载时设置其值。你会发现当使用后退按钮时,页面加载脚本会发现仍然设置了值,你可以做出相应的响应。这利用了在页面加载之间保留表单内容的浏览器功能。

#1


1  

The browser's back button and the functionality that it provides is completely independent of the content of your web page.

浏览器的后退按钮及其提供的功能完全独立于您的网页内容。

One thing you might be able to do is set your location hash when you do an AJAX update. You might be able to detect this when you load a page. I haven't tried it. You should be able to parse out the # portion of the url on the Server Side and see where you are in the AJAX history.

您可以做的一件事是在进行AJAX更新时设置位置哈希。加载页面时,您可能能够检测到这一点。我没试过。您应该能够解析服务器端URL的#部分,并查看您在AJAX历史记录中的位置。

location.hash = 'foo';

#2


0  

Thanks for your response Daniel. I now have a div around my update panel which has its display property set to none. On the Sys.Application's init event I'm checking the window.location.hash value to determine whether the page load is the result of a browser back/forward button click. If it isn't then I'm setting the display property to block, if not I leave it as 'display: none' for the time being.

谢谢你的回复丹尼尔。我现在在我的更新面板上有一个div,它的display属性设置为none。在Sys.Application的init事件中,我正在检查window.location.hash值,以确定页面加载是否是浏览器后退/前进按钮单击的结果。如果不是那么我将display属性设置为阻止,如果不是,我暂时将其保留为'display:none'。

On the server-side in the ScriptManager Navigate event handler which is called as a result of the back button being clicked I'm registering a client script block which sets the display property to block.

在ScriptManager Navigate事件处理程序的服务器端,由于单击后退按钮而调用,我正在注册一个客户端脚本块,它将display属性设置为block。

I've done a bit of testing and seems to work fine and I no longer get the flicker. I would prefer to use one of the MS AJAX client objects to check for history but there we are.

我做了一些测试,似乎工作正常,我不再得到闪烁。我更愿意使用其中一个MS AJAX客户端对象来检查历史记录,但我们确实如此。

#3


0  

Put a hidden input in the page with a blank value, and then on page load set its value. You'll find that when using the back button the page load script will find the value is still set and you can respond accordingly. This takes advantage of browser functionality that preserves form contents between page loads.

将隐藏的输入放在页面中,并带有空白值,然后在页面加载时设置其值。你会发现当使用后退按钮时,页面加载脚本会发现仍然设置了值,你可以做出相应的响应。这利用了在页面加载之间保留表单内容的浏览器功能。