我在尝试使用pushState获取某些数据时遇到问题。
所以我基本上有4个功能:
一切正常,直到我尝试推动历史记录中的状态。
history.pushState在我的获取请求之前或之后,由于某种原因中断了请求:controller / controller / about.php出于某种原因。
我尝试了console.log(url);在所有4个函数上,结果都是相同的(例如要获取的良好网址:controller / about.php)
我在提取请求中尝试了history.pushState,它工作正常(例如,加载controller / about.php),但我需要使用popstate事件并再次调用相同的提取函数。
我的摘要代码:
const loadNewContent = async url => {
const response = await fetch(url, { headers: headers });
// Tried adding pushState inside fetch request
// window.history.pushState(url, `${url}`, url);
};
// function that fires animations then load the last function
const changePage = url => {
loadNewContent(url).catch(error => console.error(error));;
};
const ajax = e => {
// Tried adding pushState before fetch fires
// window.history.pushState(newPage, ``, newPage);
changePage(newPage);
// Tried adding pushState after fetch fires
// window.history.pushState(newPage, ``, newPage);
};
// Click event fires ajax function
ajax(e);
这就是相对路径的工作方式。最后一个/
之后的所有内容都将被丢弃,并添加相对URL。
[http://localhost/imparfait
+ controller/about.php
成为http://localhost/controller/about.php
while
[http://localhost/imparfait/controller/article.php
+ controller/about.php
成为http://localhost/controller/controller/about.php
使用绝对路径(以/
开头),相对于方案的URL(以//localhost
开头),绝对URL(以http://
开头),或使用the URL object构造URL,这将使您指定base
而不是fetch
从location.href
获取它。