如何在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中的回调函数。由于您要更新当前标签网址，因此您可能需要使用此处列出的解决方案之一：How to modify current url location in chrome via extensions