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

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

保持风格含糊不清，你可以试试这个，请注意这个单循环是替换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 );
            }
        }

pushState执行时不执行

1 个答案: