在javascript中單擊按鈕時如何從另一個HTML文件加載一個html文件？

Question

我是開發Chrome應用程序的新手。 我有login.html文件和home.html文件，當我單擊login button我正在調用login API並且在成功響應中，我需要加載home.html文件並需要退出login page 。 我嘗試了很多方法，但我做不到。

請幫我。

這是我的代碼

function callSigninApi(email, password)
{
  var data = new FormData();
  data.append("emailid", email);
  data.append("password", password);

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      var resultData = JSON.parse(this.responseText);
      console.log(resultData);

      if (resultData.status == "100") 
      {
        console.log("Login success");
        // self.location="/home.html";
        //chrome.app.window.current().location.path = "/home.html";

        //let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100`;
        //open('/', 'home.html', params);

        // let html = `<div style="font-size:30px">Welcome!</div>`;
        // chrome.app.window.current().document.body.insertAdjacentHTML('afterbegin', html);

        // window.location("/home.html");

        //  let newWindow = open('/', 'home', 'width=300,height=300')
        //  //newWindow.focus();

        // newWindow.onload = function() {
        //   let html = `<div style="font-size:30px">Welcome!</div>`;
        //   newWindow.document.body.insertAdjacentHTML('afterbegin', html);
        // };

        // let html = `<div style="font-size:30px">Welcome!</div>`;
        // chrome.app.window.current().document.body.insertAdjacentHTML('afterbegin', html);

        //chrome.app.window.current().open("./home.html");

        //window.location.href = "?"+Date.now()+"#/home.html";
        // chrome.app.window.current().close();
        // chrome.app.window.create("home.html", {

        //   'outerBounds': {
        //   'width': window.screen.availWidth-40,
        //   'height': window.screen.availHeight-50
        //   },
        //   'resizable':true,
        // });
      }
      else
      {
        document.querySelector('h3#errorMsg').innerHTML = resultData.data.message;
      }
    }
  });

  xhr.open("POST", "http://127.0.0.1:5000/schools/signin");
  xhr.send(data);
}

Answer 1

可能有幾個因素在起作用，但是如果不看代碼示例就很難分辨。 您可以通過示例更新您的問題嗎？

但是，從一般意義上講：

您應該將事件監聽器嵌套在另一個事件監聽器中，以確保頁面已加載：

//event listener to ensure page has loaded
document.addEventListener('DOMContentLoaded', function() {
    // event listener for click of login button
var loginButtonClick = document.getElementById('login_button_ID');
loginButtonClick.addEventListener('click', function() {
    login();  //This is the function that calls the login API
});;

如果仍然不起作用，則需要檢查API中的回調函數。 由於您正在更新當前標簽的URL，因此您可能要使用此處列出的解決方案之一： 如何通過擴展名在chrome中修改當前url的位置