javascript - 历史 API 空状态
问题描述
在使用 Ajax 更改我的 DOM 后,我也尝试更改 URL(不刷新页面)。
$("nav li").click(function(e) {
e.preventDefault();
var url;
var targetLocation = this.parentNode.attributes.href.value;
switch (targetLocation) {
case "index.html": url = "http://localhost:8080/home"; break;
case "app.html": url = "http://localhost:8080/api"; break;
case "contact.html": url = "http://localhost:8080/contact"; break;
}
$.ajax({
type: "GET",
dataType: "text",
url: url,
context: document.body,
success: function(data) {
$("div").text(data);
history.pushState("", "", targetLocation);
}
})
})
但我收到一条错误消息:
Uncaught DOMException: failed to execute "pushState" on "History": A history state object with URL "file:///C:/test/app.html" cannot be created in a document with origin "null" and URL "file:///C:/test/index.html".
解决方案
您的代码不包含它们,但您的错误表明您正在使用本地文件。浏览器不支持对本地文件系统 URL 的历史操作。
file:// URL 的安全模型已损坏,无法修复。我们没有通过 file:// URL 的特殊情况使浏览器复杂化,而是选择通过使一类安全检查失败来禁用 file:// URL 的某些功能。不幸的是,pushState 就是这些特性之一。我建议不要在您的应用程序中使用 file:// URL。
https://bugs.chromium.org/p/chromium/issues/detail?id=301210
找不到 Firefox 的参考,但 IIRC 他们的行为与 Chrome 的相同。
推荐阅读
- imagemagick - 将多个 Imagemagick 命令转换为 1 个命令(修剪、调整大小、正方形)
- javascript - 本机 ajax 调用不会在 302 上重定向
- r - 将数据读入 R 表格式
- list - Dapper 嵌套列表查询
- animation - 在 Octave 4.2.1 中使用 set() 和 drawCircle() 移动圆
- css - 圆形图像的掩码溢出文本溢出
- python - 为什么这个排序示例在 python 中不起作用?
- javascript - 将 Yummly API 模块输出保存到 Node.JS 中的数组而不是 Console.Log
- php - Magento 2 pdf - 产品图像倒置显示
- android - 是否可以通过在“app_remove”事件上使用 Google Analytics for Firebase 触发器自动向 Android 应用发送推送通知