我想在window.history.state中添加一个名为html的属性,以便稍后使用.
所以我做了:
window.history.state.html = 'something';
但是当我回到历史时,财产似乎并不存在.
我尝试了window.history.replaceState并复制了所有状态的属性,并添加了我需要的属性,但首先它似乎正在进行另一个状态推送,这意味着历史记录中的重复URL并且它似乎也不能很好地工作.
有没有使用history api的解决方案,还是应该创建一个单独的数组并将其链接到每个pushstate(更复杂)？
我有绑定到 window.hashchange 的问题。调用 时history.replaceState，它会触发 'hashchange' 事件，除非调用了location.hash。我使用 Chrome 42 和 jQuery 来协助绑定。我已经加载了 Sammy.js（我实际上正在尝试弄清楚 Sammy 将如何解释该行为）
我正在控制台中调试，并执行以下操作：
$(window).bind('hashchange', function(e) { alert('# change' + location.hash); });
history.replaceState({}, "", "#2")-->显示警报
location.hash = "3" --> 显示警报
history.replaceState({}, "", "#4")-->不显示警报
这是一个错误，还是预期的行为？我会认为 replaceState 要么总是，要么从未触发 'hashchange' 事件
我有一个React组件，当状态更改时，它会将歌曲ID推送到url。我的问题是，当用户在浏览器上单击“后退”时，我需要更改SongApp组件的状态。我该怎么做呢？
class SongApp extends React.Component {
constructor(props) {
super(props);
this.state = {
song: props.songId
}
this.setSong = this.setSong.bind(this);
}
setSong(e) {
var songId = e.target.id;
this.setState({song: songId})
window.history.pushState({song: songId}, '', '?s='+songId)
}
render() {
var id = this.state.song;
var content = id ? <SongDisplay lyrics={ this.props.songData[id].lyrics } /> : <SongIndex songData={this.props.songData} setSong={this.setSong}/>
return(
<div className="song-app">
{content}
</div>
)
}
}
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
debugger;
if(event.state.song) {
// change SongApp state
}
});
使用html5 历史 api进行 url 重写时支持离线模式的最佳实践是什么（以及如何去做）？
例如，（假设）我在https://abc.xyz有一个 PWA SPA 应用程序，它内置了国际化功能。因此，当我访问此链接时，Vue 路由器（理想情况下可以是任何框架 - vue、react、Angular 等） .) 将我重定向到https://abc.xyz /en。
当我在线时，这非常有效（当然，网络服务器也正在处理此重定向，因此即使您直接访问上述链接，应用程序也可以正常工作）。
然而，当我离线时，情况就不同了。服务工作线程会正确缓存所有资源，因此当我访问 URL https://abc.xyz时，所有内容都会按预期加载。但是，现在如果我手动输入https://abc.xyz /en的 URL ，应用程序将无法加载。
有关如何实现这一目标的任何指示？
链接到 github 中的同一问题：https ://github.com/vuejs-templates/pwa/issues/188
offline offline-mode html5-history vue.js progressive-web-apps
我有一个Android webview,其页面重定向到另一个页面,使用location.replace(url).
让我们说我有页面"A"重定向到页面"B"(使用location.replace).当从页面"B"按下"后退"按钮时,页面返回页面"A",再次将其重定向到页面"B".当我调试历史api(history.length)时,我可以清楚地看到页面"B"的长度增加了"1"(仅在Android 4.X webview上.在iOS /网络浏览器/ Android 2.X上保持不变),这是一个错误!(location.replace不应该改变history.lenght!)
我有一个带有scrollspy的菜单(使用twitter boostrap).我希望window.location.hash在用户向下滚动到下一部分时更新.
用户向下滚动时,以下代码有效:
$(window).on('activate.bs.scrollspy', function (e) {
location.hash = $("a[href^='#']", e.target).attr("href") || location.hash;
});
但是,当用户向上滚动时,它不能很好地工作.
这样做的原因是设置新location.hash触发器会触发浏览器导航到相应的锚点.这会引发连锁反应,用户将立即在页面顶部结束.
现在解决这个问题的最简单方法是什么？
jquery window.location twitter-bootstrap html5-history scrollspy
正如标题所述，当我使用 pushState() 更改历史记录时，它会出于某种原因将我的条目两次添加到堆栈中，即使它只单击了一次。因此，当我尝试使用后退按钮返回时，每隔一次按下该按钮我只会得到一个弹出状态。当我将状态记录到控制台时，每当我收到“pop”时，它都会显示“null”。
这就是历史的样子：
Run Code Online (Sandbox Code Playgroud)http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/27/ http://example.com/foo/bar/question/27/
我想要做的是在链接点击时重新加载 iframe（并更改 h1 文本）而不重新加载整个页面，但仍然具有可遍历和可收藏的历史记录（这是一个词吗？）......似乎应该简单点，我已经浏览了 MDN 和其他教程上的示例，但无济于事。
我的代码如下。我确定我做错了什么，但任何帮助/见解将不胜感激！
$(".vidlinks a").on('click', function(e) {
var frsrc = 'https://player.vimeo.com'+$(this).attr('data-iframe')+'?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&autoplay=1',
targetUrl = $(this).attr('href'),
pgtitle = $(this).attr('title'),
obj = {url:targetUrl,ttl:pgtitle};
$("iframe").attr('src', frsrc );
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(pgtitle);
});
$(".vidtitle h1").fadeIn("fast");
window.history.pushState(obj, document.title, targetUrl);
return false;
});
window.onpopstate = function(e) {
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(e.state.ttl);
});
$(".vidtitle h1").fadeIn("fast");
}
编辑：我也尝试使用 replaceState() 而不是 pushState()。这种方式解决了重复输入问题，但使用后退按钮不会更改使用此方法的浏览器中的状态。这已经在 Chrome、Safari 和 FF 上进行了测试。
编辑 编辑：奇怪的是，如果我完全注释掉 pushState() 语句，然后单击后退按钮，iframe 将重新加载到上一个视频，但没有其他任何变化。
3（编辑）： …
例如，我有以下 html：
<body>
<script src="code.js?q=xyz"></script>
</body>
我希望能够q=xyz从内部读取查询参数code.js。我试过：
console.log(window.location.href)
但它给了我 html 文档的 URL，而不是code.js的 URL（然后我可以解析查询参数的 URL）。
有没有办法从该 JavaScript 中获取导入的 JavaScript 文件的查询参数？我知道我可以在服务器上读取查询参数，然后发回嵌入了查询参数的 JavaScript，但我不想要那样。我希望能够将 JavaScript 文件放在可以通过查询参数配置的 CDN 上。
javascript script-tag query-parameters location-href html5-history
我必须维护一个带有 AJAX 搜索表单的站点（例如书籍），并且我希望搜索结果成为浏览器历史记录的一部分。
所以我设置了“popstate”事件处理程序
window.addEventListener('popstate', function(e) {
alert("popstate: " + JSON.stringify(e.state));
});
并在成功的 AJAX 请求后调用pushState()：
var stateObj = { q: "harry potter" };
window.history.pushState(stateObj, "Result", "/search");
然后我的点击流是：
当我再回去一次时，我收到一条警告，其中popstate: null -路径更改为 /
当我在那之后继续前进时，我得到popstate: {"q":"harry potter"} -路径更改为 /search
因此，重要的 popstate 事件（带有查询字符串的事件）仅在前进时触发，而在返回时不会触发。
这是因为我从一个站点导航回来，它的历史条目是自动创建的，而不是由 pushState 以编程方式创建的？但如果是这样，History API …
我写了两个 HTML 文件：
<a href = "Home.html">Next Page</a><html>
<body>
<a href = >Login.html>>Prev Page</a>
</body>
<script type = "text/javascript" >
history.pushState("anything", "", "#1");
window.onhashchange = function (event) {
window.location.hash = "a";
};
</script>
</html>` 我正在尝试禁用浏览器的后退按钮。如果我在 chrome 上执行此代码，它不会禁用后退按钮，但如果我history.state在 Home.html 页面的控制台中运行命令，然后单击后退按钮，那么它会保留在同一页面上（按预期工作）。为什么这样？
html5-history ×10
javascript ×7
pushstate ×3
html ×2
jquery ×2
android ×1
offline ×1
offline-mode ×1
reactjs ×1
script-tag ×1
scrollspy ×1
vue.js ×1