javascript - PushState 在不应该执行的时候执行

Question

我正在使用 HTML 历史记录 API 来操作浏览器历史记录堆栈，以在我的网站上使用 JavaScript 控制导航。我设置的更改页面的功能工作正常，但奇怪的是，当我将 pushState 添加到每个单独的页面更改时，pushState 会自动触发，以便最后一页函数中的更改始终是最后执行的更改。这意味着被推送的状态始终是最后一个页面更改语句。

JavaScript:

// Change Page Function

function ChangeContent (page) {

var pages={"homepage":{title: "homepage"},"servicespage":{title: "servicespage"},"estimatespage":{title: "estimatespage"}};

HideNav();

//Show home page
for(var homepage in pages) {

    if(page!==homepage) {

        document.getElementById(homepage).style.display='none';
    }

    else {

        document.getElementById(homepage).style.display='block';
        history.pushState("homepage", "Home", "home" );
        window.scrollTo(0,0);
    }
}

//Show services page
for(var servicespage in pages) {

    if(page!==servicespage) {

        document.getElementById(servicespage).style.display='none';
    }

    else {

        document.getElementById(servicespage).style.display='block';
        history.pushState( "servicespage", "Our Services", "services");
        window.scrollTo(0,0);
    }
}

//Show estimates page
for(var estimatespage in pages) {

    if(page!==estimatespage) {

        document.getElementById(estimatespage).style.display='none';
    }

    else {

        document.getElementById(estimatespage).style.display='block';
        history.pushState( "estimatespage", "Get An Estimate", "estimates");
        window.scrollTo(0,0);
    }
}
}

当您运行此代码时，不是每个单独的页面在单击该页面时推送其状态，而是推送的状态始终是估计页面状态。我尝试过使用 else if 语句，并且尝试将每个 for 语句嵌入到自执行函数中，希望它可以解决某种范围问题，但我没有运气。

这是我的 onPopstate 函数:

// History State Change Display
window.onpopstate = function (event) {

var state = event.state;

console.log(state);

// Change History State Display To Home Page
if (state === "homepage") {

    document.getElementById("homepage").style.display = 'block';
} else {

    document.getElementById("homepage").style.display = 'none';
}

// Change History State Display To Services Page
if (state === "servicespage") {

    document.getElementById("servicespage").style.display = 'block';
} else {

    document.getElementById("servicespage").style.display = 'none';
}

// Change History State Display To Estimates Page
if (state === "estimatespage") {

    document.getElementById("estimatespage").style.display = 'block';
} else {

    document.getElementById("estimatespage").style.display = 'none';
}
};

由于某种原因，我点击的每个新页面都有 URL 扩展 /estimatespage，然后当我点击后退按钮时，它只是以与页面中写入的相反顺序循环浏览页面。页面更改功能，并正确更新URL。

我不完全确定这里的问题是什么，但我认为我正在自动推送所有页面的状态，这很奇怪，因为其余代码仅在选择正确的页面时才执行。

任何帮助将不胜感激，因为我认为这可能比我想象的更明显。

HTML

<div id="nav">
     <div class="headerlist" onclick="ChangeContent('homepage');">Home</div>
     <div class="headerlist" onclick="ChangeContent('servicespage');">Services</div>
     <div class="headerlist" onclick="ChangeContent('estimatespage');">Estimates</div>
</div>

<div id=homepage></div>
<div id=servicespage></div>
<div id=estimatespage></div>

Answer 1

ChangeContent() 中有三个 for 循环。所有三个循环都在测试完全相同的条件——仅使用重命名的变量。

保持样式大致相同，您可以尝试这样做，请注意，这个单个循环将替换 ChangeContent() 中的所有三个循环:

        for ( var p in pages ) {
            if  ( page !== p ) {
                document.getElementById( p ).style.display = 'none';
            }
            else {
                document.getElementById( p ).style.display = 'block';
                if ( p === "homepage" )
                    history.pushState( "homepage", "Home", "home" );
                else if ( p === "servicespage" )
                    history.pushState( "servicespage", "Our Services", "services");
                else if ( p === "estimatespage" )
                    history.pushState( "estimatespage", "Get An Estimate", "estimates");                    
                window.scrollTo( 0, 0 );
            }
        }