我编写了一个代码,我在其中配置了on -pageshow(event),以检查页面是否来自缓存。如果页面来自缓存,我将重新加载同一页面以击中服务器。但是,在这样做时,有一个屏幕闪烁的问题。原因是当我单击"浏览器返回"按钮时,首先从高速缓存加载并显示页面,然后在完成加载后,它将进入OnPagesHow方法,该方法再次刷新了页面。有什么方法可以避免闪烁的问题?
这是代码:
function RefreshloadWindow()
{
if(!(window.performance && window.performance.navigation.type == 2))
{
console.log("In On Load");
GetLatestBreadcrum();
}
}
function GetLatestBreadcrum()
{
console.log("In Breadcrum function");
var matches=[];
var divElements=document.getElementById("breadCrumDiv").children;
console.log(divElements);
var j=0;
for(i=0;i<divElements.length;i++)
{
//console.log(divElements[i].tagName);
if(divElements[i].tagName=="A")
{
matches[j]=divElements[i];
j++;
}
}
for(z=0;z<matches.length;z++)
{
console.log(matches[z]);
}
var lastElement=matches.length;
//matches[lastElement-1].click();
window.name=matches[lastElement-1];
console.log(window.name);
}
function IsPagePersisted(event)
{
if(event.persisted || window.performance && window.performance.navigation.type == 2)
{
//console.log("From Cache 2");
var iLink=document.createElement('A');
iLink.href=window.name;
GetLatestBreadcrum();
iLink.click();
}
}
和身体标签如下:
<body onpageshow="IsPagePersisted(event)" onload="RefreshloadWindow()" >
如果您不想显示页面最初可以添加 "display: none;"
到身体标签,然后在重新加载后删除该样式。