为什么点击浏览器的后退按钮时需要强制重新加载才能看到上一页？

问题描述 投票：0回答：1

我是一名初学者 Web 开发人员，正在为我的作品集构建网站。我遇到一个问题，当我单击浏览器的后退按钮时无法立即导航到上一页，而是显示正确的 url 路径名和当前页面。我必须强制重新加载，然后浏览器才能显示正确的页面。我怎样才能解决这个错误？谢谢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stocknetic</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>  
      
    
    <header id="header">
      <div class="row">
        <div class="col-full">
          <div class="nav-container">
            <h2 class="title"><a id="title-link-home" href="/">Stocknetic</a></h2>
              <div class="nav-items-container hidden">
                <ul class="nav-list-items">
                  <li class="nav-list-item"><a href="#/watchlist">Watchlist</a></li>
                  <li class="nav-list-item"><a href="#/statistics">Statistics</a></li>
                  <li class="nav-list-item"><a href="#/news">News</a></li>
                  <li class="nav-list-item"><a href="#/profile">Profile</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
        </header>

      <div class="page-wrap">

      <div class="home-container view" data-view="home">
        <div class="logo-container">
          <div class="logo-text-container">
            <h1 class="logo">Stocknetic</h1>
          </div>
          <div class="auth-buttons-container">
            <button id="sign-in-button">Sign-In</button>
            <button id="register-button">Register</button>
            <button id="sign-out-button">Sign-Out</button>
          </div>
        </div>
      </div>

      <div class="sign-in-page hidden" data-view="sign-in"></div>
      <div class="registration-page-container hidden" data-view="registration"></div>
      <div class="watchlist-page-container hidden" data-view="watchlist"></div>
      <div class="statistics-page-container hidden" data-view="statistics"></div>

    </div>
    
    <footer id="footer">
        <div class="row" >
          <div class="col-full">
            <div class="footer-container">
                <h2 class="title">Stocknetic</h2>
              </div>
            </div>
          </div>
        </footer>
        
        
    <script type="module" src="js/index.js"></script>
    <script type="module" src="js/data.js"></script>
  </body>
</html>

var root = window.location.protocol + '//' + window.location.host + '/';
var currentURL = window.location.href
var homeViewEl = document.querySelector('[data-view="home"]')
var homeView = homeViewEl.getAttribute("data-view")
var watchlistViewEl = document.querySelector('[data-view="watchlist"]')
var watchlistView = watchlistViewEl.getAttribute("data-view")
var registrationViewEl = document.querySelector('[data-view="registration"]')
var registrationView = registrationViewEl.getAttribute("data-view")
var signInViewEl = document.querySelector('[data-view="sign-in"]')
var signInView = signInViewEl.getAttribute("data-view")

function showHomePage() {

    homeViewEl.classList.remove("hidden")
    homeViewEl.classList.add("view")

    if (sessionStorage.getItem("id") !== null) {
        var registrationButton = document.getElementById("register-button")
        registerButton = registrationButton
        registrationButton.classList.add("hidden")
    } 
}

function renderRegistrationForm() {

    var registrationForm = document.createElement("form")
    registrationForm.setAttribute("id", "registration-form")
    var registrationContainer = document.createElement("div")
    registrationContainer.className = "registration-container"
    var registrationHeader = document.createElement("h2")
    registrationHeader.setAttribute("id", "registration-header")
    registrationHeader.textContent = "Registration"
    var registrationFirstNameLabel = document.createElement("label")
    registrationFirstNameLabel.textContent = "First Name"
    var registrationFirstNameInput = document.createElement("input")
    registrationFirstNameInput.setAttribute("placeholder", "First Name")
    var registrationLastNameLabel = document.createElement("label")
    registrationLastNameLabel.textContent = "Last Name"
    var registrationLastNameInput = document.createElement("input")
    registrationLastNameInput.setAttribute("placeholder", "Last Name")
    var registrationAddressOneLabel = document.createElement("label")
    registrationAddressOneLabel.textContent = "Address 1"
    var registrationAddressOneInput = document.createElement("input")
    registrationAddressOneInput.setAttribute("placeholder", "Street Address")
    var registrationAddressTwoLabel = document.createElement("label")
    registrationAddressTwoLabel.textContent = "Address 2"
    var registrationAddressTwoInput = document.createElement("input")
    registrationAddressTwoInput.setAttribute("placeholder", "City, State, ZIP")
    var registrationPhoneNumberLabel = document.createElement("label")
    registrationPhoneNumberLabel.textContent = "Phone Number"
    var registrationPhoneNumberInput = document.createElement("input")
    registrationPhoneNumberInput.setAttribute("placeholder", "10 Digit Phone Number")
    var registrationEmailAddressLabel = document.createElement("label")
    registrationEmailAddressLabel.textContent = "Email Address"
    var registrationEmailAddressInput = document.createElement("input")
    registrationEmailAddressInput.setAttribute("placeholder", "Email Address")
    var registrationPasswordLabel = document.createElement("label")
    registrationPasswordLabel.textContent = "Password"
    var registrationPasswordInput = document.createElement("input")
    registrationPasswordInput.setAttribute("placeholder", "Password")
    var registrationConfirmPasswordLabel = document.createElement("label")
    registrationConfirmPasswordLabel.textContent = "Confirm Password"
    var registrationConfirmPasswordInput = document.createElement("input")
    registrationConfirmPasswordInput.setAttribute("placeholder", "Confirm Password")
    var authbuttonsContainerTwo = document.createElement("div")
    authbuttonsContainerTwo.className = "auth-buttons-container-two"
    var linkToPreviousPageFromRegistration = document.createElement("a")
    linkToPreviousPageFromRegistration.setAttribute("href", "/")
    linkToPreviousPageFromRegistration.setAttribute("id", "previous-page-from-registration-link")
    linkToPreviousPageFromRegistration.textContent = "Previous"
    var previousPageFromRegistrationButton = document.createElement("button")
    previousPageFromRegistrationButton.className = "previous-page-from-registration-button"
    var linkToHomePageFromRegistrationForm = document.createElement("a")
    linkToHomePageFromRegistrationForm.setAttribute("href", "/")
    linkToHomePageFromRegistrationForm.setAttribute("id", "home-page-from-registration-link")
    linkToHomePageFromRegistrationForm.textContent = "Continue"
    var registerNewCustomerButton = document.createElement("button")

    registrationContainer.appendChild(registrationHeader)

    registrationContainer.appendChild(registrationFirstNameLabel)
    registrationContainer.appendChild(registrationFirstNameInput)

    registrationContainer.appendChild(registrationLastNameLabel)
    registrationContainer.appendChild(registrationLastNameInput)

    registrationContainer.appendChild(registrationAddressOneLabel)
    registrationContainer.appendChild(registrationAddressOneInput)

    registrationContainer.appendChild(registrationAddressTwoLabel)
    registrationContainer.appendChild(registrationAddressTwoInput)

    registrationContainer.appendChild(registrationPhoneNumberLabel)
    registrationContainer.appendChild(registrationPhoneNumberInput)

    registrationContainer.appendChild(registrationEmailAddressLabel)
    registrationContainer.appendChild(registrationEmailAddressInput)

    registrationContainer.appendChild(registrationPasswordLabel)
    registrationContainer.appendChild(registrationPasswordInput)

    registrationContainer.appendChild(registrationConfirmPasswordLabel)
    registrationContainer.appendChild(registrationConfirmPasswordInput)

    previousPageFromRegistrationButton.appendChild(linkToPreviousPageFromRegistration)
    registerNewCustomerButton.appendChild(linkToHomePageFromRegistrationForm)

    authbuttonsContainerTwo.appendChild(previousPageFromRegistrationButton)
    authbuttonsContainerTwo.appendChild(registerNewCustomerButton)

    registrationContainer.appendChild(authbuttonsContainerTwo)

    registrationForm.appendChild(registrationContainer)
    registrationViewEl.appendChild(registrationForm)

    console.log("see registration page")
}

var registerButton = document.getElementById("register-button")
registerButton.addEventListener("click", function (event) {
    event.preventDefault()
    
    showRegistrationPage()
})

function showRegistrationPage() {

    renderRegistrationForm()

    registrationViewEl.classList.remove("hidden")
    registrationViewEl.classList.add("view")
    homeViewEl.classList.remove("view")
    homeViewEl.classList.add("hidden")
    
    window.location.hash = "/registration"
}

function renderSignInForm() {
    console.log("Show sign in page.")
}

var signInButton = document.querySelector("#sign-in-button")
signInButton.addEventListener("click", showSignInPage)

function showSignInPage(event) {
    event.preventDefault()

    renderSignInForm()
    sessionStorage.setItem("id", "user")
    
    var registrationButton = document.querySelector("#register-button")
    registrationButton.classList.add("hidden")
    homeViewEl.classList.remove("view")
    homeViewEl.classList.add("hidden")

    window.location.hash = "/signIn"
}

var signOutButton = document.querySelector("#sign-out-button");
signOutButton.addEventListener("click", signOut)

function signOut() {
    sessionStorage.clear()

    var registrationButton = document.querySelector("#register-button")
    registrationButton.classList.remove("hidden")

    window.location.replace(root)
}

function showWatchlistPage(event) {
    event.preventDefault()

    var navItemsContainer = document.querySelector(".nav-items-container")
    
    navItemsContainer.classList.remove("hidden")
    watchlistViewEl.classList.remove("hidden")
    homeViewEl.classList.add("hidden")

    console.log("watchlist page")
}

function showStatisticsPage(event) {
    event.preventDefault()

    var navItemsContainer = document.querySelector(".nav-items-container")
    navItemsContainer.classList.add("hidden")
    console.log("statistcs page")
}

function showNewsPage(event) {
    event.preventDefault()

    var navItemsContainer = document.querySelector(".nav-items-container")
    navItemsContainer.classList.add("hidden")

}

function showProfilePage(event) {
    event.preventDefault()

    var navItemsContainer = document.querySelector(".nav-items-container")
    navItemsContainer.classList.add("hidden")
    
}

function displayNavItems(){
    
    var navItemsContainer = document.querySelector(".nav-items-container")
    
    if (sessionStorage.getItem("id") === null) {
    navItemsContainer.classList.add("hidden")
    } else if (sessionStorage.getItem("id") !== null) {
        navItemsContainer.classList.remove("hidden")
        navItemsContainer.classList.add("view")
    }
}

displayNavItems()

function hideScrollBar() {
    var pageWrapper = document.querySelector(".page-wrap")
    
    console.log(document.body.clientHeight)
    console.log(document.body.scrollHeight)

    if (document.body.clientHeight === document.body.scrollHeight) {
        document.body.style.overflow = "hidden"
    } else if (document.body.clientHeight !== document.body.scrollHeight) {
        document.body.style.overflow = "auto"
    }
}

hideScrollBar()

window.addEventListener("DOMContentLoaded", handleCurrentPageView )

function handleCurrentPageView() {

    var navItemsContainer = document.querySelector(".nav-items-container")
    
    if (sessionStorage.getItem("id") === null) {
    navItemsContainer.classList.add("hidden")
    } else if (sessionStorage.getItem("id") === null) {
        navItemsContainer.classList.remove("hidden")
        navItemsContainer.classList.add("view")
    }
    
    if (currentURL === root) {
        showHomePage()
        return
    }
    
    if (currentURL === `${root}#/registration`) {
        showRegistrationPage()
        return
    }
    
    if (currentURL === `${root}#/signInView`) {
        showSignInPage()
        return  
}}

javascript browser-history
1个回答
0
投票

JavaScript 文件 index.js 和 data.js 是使用 type="module" 属性导入的，这意味着它们必须托管在服务器上并且不能在本地加载尝试删除该属性（type="module"）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.