标签: html5-history
history.back()不适用于Chrome中预期的HTML5历史记录API
该history.back()函数应该让我回到使用HTML5历史API创建的历史记录中的一步.以下代码在Firefox中按预期工作,但在Chrome中不起作用:
<html>
<script type="text/javascript">
history.replaceState({path: '/home'}, '', '?page=home');
history.pushState({path: '/second'}, '', '?page=second');
console.log(history.state.path); // says "/second"
history.back();
console.log(history.state.path); // says "/second" but should say "/home"
</script>
</html>
在Chrome中,它会打印/second两次,而在返回后它应该打印/home.我错过了什么吗？
推荐指数
解决办法
查看次数
AJAX内容和浏览器导航按钮
嗨有以下jQuery事件:
listItems.on('click', function(ev) {
ev.preventDefault();
reload = true;
var url = jQuery(this).attr('data-url');
history.pushState({}, '', url);
...
}
其中加载通过AJAX动态内容,并推动历史的国家,从修改浏览器的URL www.domain.com来www.domain.com/page-x.通过AJAX加载内容的唯一原因是我需要动画页面过渡.如果你去找www.domain.com/page-x你正常的HTML页面.
如果单击listItem用户单击其浏览器上的后退按钮后,会出现此问题.网址会更改www.domain.com/page-x为www.domain.com,但页面不会重新加载.这就是我添加此事件的原因:
window.onpopstate = function() {
if (reload == true) {
reload = false;
location.reload();
}
}
如果当前页面是通过AJAX加载的,它会在url更改后重新加载页面.它工作正常,但现在我有其他问题:
- 用户在首页点击列表项;
- 浏览器URL更改,内容通过AJAX和动画加载;
- 用户点击BACK浏览器按钮;
- 浏览器URL更改为上一页并重新加载页面;
- 用户单击FORWARD浏览器按钮,URL更改但没有任何反应 ;
任何想法/解决方案都将受到高度赞赏.
推荐指数
解决办法
查看次数
使用什么 javascript History API 与本地存储来保存 Ajax 数据以在“后退”按钮上加载
我有一个电子商务网站，我首先将初始产品槽（10 个产品）加载到产品列表中。稍后，当用户向下滚动服务调用时，使用ajaxcall 获取数据并使用 jQuery 将其附加到产品列表。
现在，如果用户单击某个产品，他将导航到“产品详细信息”页面，如果从这里单击“返回”，“产品列表”页面将仅显示 10 个产品。
我已经了解了 javascript History API 以及其他解决方案。Twitter 还表示它使用历史记录 API 来实现它，但它会稍微增加页面延迟，如下所述：implementation-pushstate-for-twitter.com 我应该走哪条路？
或者其他人对于这种情况有更好的解决方案，建议将不胜感激。提前致谢。
推荐指数
解决办法
查看次数
如何在Windows PopState上当前（而非先前）状态
我正在抓取popstate，并且需要根据历史记录堆栈中的current和originalEvent做各种事情。但是，我不知道如何获取当前状态进行比较，但是originalEvent可以工作。这是我的JS代码。第一条IF语句引发未定义e.state.id的异常...
$(window).on("popstate", function(e) {
//check and compare current state
if (e.state.id == 'something') { // throws an exception
*do something*
} else if (e.originalEvent.state !== null) { //previous state exists?
*do something*
} else { //no previous state
*do something*
}
});
仅供参考，推送状态设置为：
history.pushState({id: 'view'}, '', '/view');
推荐指数
解决办法
查看次数
更改 html 内容和 url，无需重新加载页面
我看到许多网站（例如gitHub）更改了 html 内容并且URL没有刷新页面。
我找到了一种可能的方法来做到这一点HTML Histroy API。
这是代码。
超文本标记语言
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li><a href="home.html" class="historyAPI">Home</a></li>
<li><a href="about.html" class="historyAPI">About</a></li>
<li><a href="contact.html" class="historyAPI">Contact</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
首页.html
This is home page
关于.html …
推荐指数
解决办法
查看次数
如何防止 iframe 修改顶级浏览上下文（top.history）？
我尝试创建一些能够在其中托管其他子应用程序（相同域）的布局管理 Web 应用程序。
目前，主应用程序可以跟踪子应用程序中的任何导航并在主应用程序中保留导航记录。用户可以单击后退或前进按钮转到最近的页面。一切正常，直到我在子应用程序中找到一些代码，这些代码以编程方式更改子应用程序中的location.hash属性或调用history.pushState方法。
通常，浏览器会自动将旧的历史状态添加到正确的子应用程序的历史堆栈中。但是现代浏览器总是在主应用程序和导致主应用程序历史中断的所有其他 iframe（子应用程序）之间共享历史堆栈。用户不能在浏览器中单击返回到主应用程序之前访问的上一页。
根据W3C
该联席会议历史一个的顶级浏览器上下文是所有充分活动文档的所有浏览上下文的所有会话历史的联合对象共享该顶级浏览方面，与所有在各自当前的条目中的条目除当前的联合会话历史条目外，会话历史被删除。
我有2个问题。
是否可以为每个 iframe 创建单独的历史记录？我试着这样设置
document.domain。- 主要应用程序域是“apps.site.com”。
- 子应用程序域是“apps.site.com”，但我将其更改为“site.com”以防止跨站点脚本。但它不起作用，因为浏览器同步此历史记录而不是 iframe。
有什么办法可以阻止 iframe 导航/散列更改/pushState？我目前的想法是修补每个相关的属性/方法，并监听
click事件以防止更改浏览器历史记录。我不确定这会奏效，而且这样做似乎太冒险了。
谢谢，
参考：https : //html.spec.whatwg.org/multipage/browsers.html#traverse-the-history
推荐指数
解决办法
查看次数
访问 React Router 历史堆栈
我有一个应用程序，您可以通过各种方式（搜索、按类别向下钻取等）访问相册列表。从相册中，您单击打开单张照片并使用左/右箭头以及各种编辑工具遍历它们。每个迭代/工具操作都会执行 history.push() 以将路由添加到路由器历史记录中。我正在尝试实现一个按钮，在您开始查看单张照片之前，该按钮将返回到历史记录中的确切位置。为此，我想将历史堆栈向后移动到历史与多个模式中的 1 个匹配的点，然后执行 history.go(-14)（或其他）以跳回开始整个过程的路线链。
我一直在搜索 React 路由器代码以及 HTML5 History 对象，但没有看到任何直接访问历史堆栈的方法，因此我可以将其返回。我宁愿不依赖于让每个单独的照片动作将它们的路径推到一个单独的地方，因为这使它变得脆弱（每个照片动作都是由不同的开发人员构建的，并且将来添加新动作将需要以前的知识来记住这样做）。
我无法进入硬编码路径，因为它会被推到历史堆栈的顶部，而点击后退箭头只会将您返回到最后一个单独的照片页面，而不是首先生成相册列表的搜索页面.
关于访问历史堆栈的任何建议？
推荐指数
解决办法
查看次数
window.pushState 不会增加历史记录长度
我有以下尝试操作堆栈的代码window.history：
console.log("before:" + window.history.length);
window.history.pushState(null, null, '/page1');
console.log("after:" + window.history.length);
尽管我添加了一个状态，但在beforeand中总是打印相同的内容：after
before:50
after:50
为什么pushState不增加历史长度？顺便说一句，50即使我刷新页面，长度也总是如此。
推荐指数
解决办法
查看次数
获取onpopstate事件上弹出的历史记录
我有一个onpopstate事件监听器。我想获得无需穿越历史就弹出的历史记录。我可以这样做history.forward()并获取状态，但这会导致我不想看到的副作用。
window.addEventListener('popstate', (event) => {
prevHistoryRecord = // How to get it without history.forward()
});
推荐指数
解决办法
查看次数
更改 window.location.hash 会在历史记录中创建条目，但不会影响 chrome 后退按钮
更新：-正如Akansh Gulati他的回答中指出的，如果用户在单击后退按钮之前与页面进行任何交互，这将按预期工作，如果用户没有与页面进行任何交互并按后退按钮，则历史记录中的任何条目（通过哈希-change 或通过history.push/replace）将被忽略，这是Google Chrome更新的一部分，将阻止网站劫持您的浏览器后退按钮
这是有效且合乎逻辑的答案，所以我接受他的答案
我试图在页面加载后显示成功的弹出窗口，如果用户按 android 后退按钮（在本例中相当于浏览器后退按钮），我只想关闭弹出窗口（不想重定向回付款页面）
当弹出窗口打开时，我在 url 中添加哈希，但当用户按下后退按钮时，chrome 会忽略哈希并重定向回上一页，而不是仅删除哈希（在 Firefox 中工作正常）
我这里有一个工作示例，使用以下 HTML 代码来重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body onload="test()">
<button type="button" onclick="window.history.back();">Back</button>
</body>
<script type="text/javascript">
function writeLength() {
document.body.appendChild(document.createTextNode(window.history.length));
}
function test() {
window.location.hash = 'a';
setTimeout(function() {
writeLength();
window.location.hash = 'b';
setTimeout(function() {
writeLength();
window.location.hash = 'c';
setTimeout(function() {
writeLength();
}, 1500);
}, 1500);
}, 1500);
}
</script>
</html>a) 在 chrome 中打开此页面
b) 等待哈希值更改为“#c” …
推荐指数
解决办法
查看次数
标签 统计
html5-history ×10
javascript ×9
html ×4
ajax ×1
back ×1
html5 ×1
iframe ×1
jquery ×1
react-router ×1
reactjs ×1