Tag: pushstate

window.onpopstate仅影响一个页面范围

我有一个从数据库加载动态内容的函数，当点击某些链接时调用它： jQuery的 function loadContent(href){ $.getJSON(“/route”, {cid: href, format: ‘json’}, function(results){ $(“#content_area”).html(“”); $(“#content_area”).append(results.content); reinitFunc1(); reinitFunc2(); reinitFunc3(); // history.pushState(”, ‘New URL: ‘+href, href); }); }; 我想启用pushState和onpopstate 。 我可以通过取消注释上面的history.pushState行来启用URL和浏览器历史记录更改 – 在多个页面中向前和向后导航可以正常工作。 但这不会加载内容。 前一阵子我认为我有完整的function（即导航和内容加载），并添加了以下元素： window.onpopstate = function(event) { console.log(“pathname: “+location.pathname); loadContent(location.pathname); }; 因此我尝试将它们添加到一个单独的块中： $(document).ready(function() { window.onpopstate = function(event) { console.log(“pathname: “+location.pathname); loadContent(location.pathname); }; }); 但这会导致导航时的页面范围限制为1，我无法向前导航。 如何使用上面的代码作为基础来实现导航和内容加载？ 编辑 作为参考，正确的路径在浏览器历史记录中，只是它们无法导航（FF和Chrome）并且相应的内容未加载。 Firebug中没有错误。

使用pushstate添加查询字符串

我正在做类似下面的事情 if(history.pushState) { var stateObject = { dummy: true }; var url = window.location.protocol + “//” + window.location.host + window.location.pathname + ‘?myNewUrlQuery=1’; history.pushState(stateObject, jQuery(document).find(‘title’).text(), + url); } 我的路径名正确，但查询字符串为Nan。 例如，我得到了结果 http://example.com/mypage/Nan 代替 http://example.com/page/?myNewUrlQuery=1 请告诉我是否可以使用pushstate方法在URL中添加查询字符串。 如果是，任何工作示例都将非常有用。 提前致谢。

如何修改Facebook的照片查看器的历史记录？

我的网站上有一个类似于facebook的照片查看器的弹出模式。 当模态打开时，它显示来自另一个页面的内容，我想更改地址栏值和历史记录以显示此内容。 模态中有一个下拉列表，它将模态中的内容更改为其他页面的内容。 发生这种情况时，我再次想要更改地址栏值和历史记录以显示页面已更改。 基本上，我想要完全复制facebook的照片查看器的行为 ，您可以通过以下方式尝试： 点击此链接 点击Photos 点击页面上的照片 单击向右或向左箭头（或使用键盘箭头键）更改iamges a）单击浏览器中的后退和前进历史记录按钮 b）单击照片查看器 我试图创建一个JSFiddle来显示我在这里的位置，但JSFiddle显然不允许操纵历史记录。 因此，我已将我的代码放在这里 ， 您可以从这里下载 。 几个关键点： 首先查看索引页面，然后使用该链接转到测试页面 当模态关闭时，按后退按钮不应重新打开模态，而是应该返回索引页面。 关闭模式后，按下前进按钮应该重新打开模式，因为Facebook的照片查看器确实处于原始状态 在我的生产代码中，将更改完整的URL，而不是在URL中添加/更改变量，如演示代码中所示

有没有办法以编程方式从我的javascript文件中调用和执行pjax？

我有一个function，等待用户点击文本类型的输入，然后等待用户按向下和向上箭头键。 当用户按下向下和向上箭头键时，调用函数hoverDown（），它基本上以编程方式hover在表行上。 按下enter键时，将调用window.location并加载相应的页面。 问题是我在整个应用程序中使用pjax来动态加载内容并在没有页面刷新的情况下推送新URL。 当我调用window.location函数时，pjax不再起作用，而是加载了正确的url并且发生了整页刷新 – 这是我想要避免的事情。 有没有办法以编程方式从我的函数中调用和执行pjax？ 相关代码： // HTML Name Title Scott Client BillyClient GeorgeClient SaraClient JohnClient MeganClient BenClient JullyClient BethanyClient AlenClient JaneClient AliceClient //使用Javascript $(document).ready(function(){ $(“#main”).on(“keydown”, “#search”, hoverDown); }); function hoverDown(e) { var $tbl = $(‘#tblDataBody’); var $cur = $(‘.active’, $tbl).removeClass(‘active’).first(); if (e.keyCode === 40) { //down if ($cur.length) { $cur.next().addClass(‘active’); } […]

Javascript历史状态不正确

我正在尝试使用填充当前所选选项卡的索引 history.pushState({tabSelected: 1}, null, “”); 我有一个jquery中popstate事件的处理程序，它以编程方式切换jquery ui选项卡。 $(window).bind(“popstate”, function(event) { var state = event.originalEvent.state; … } 这工作正常，浏览器和我可以使用后退和前进按钮在选项卡之间切换。 也适用于两层标签。 但在某些情况下，我想将其他状态推送到堆栈。 所以我做了以下事情： var content = { targetId : id, targetContent : $(“#myDivId”).html() }; $.extend(content, {tabSelected: currentTab}); history.pushState(content, null, “”); 我把它推到历史之前和之后看起来都很好。 检查console.log（history.state）; 还尝试检查chrome控制台。 但是在我的popstate处理程序中，我没有在对象event.originalEvent.state上看到targetId，tabSelected属性。 我在对象上看到tabSelected的正确值，但由于某种原因，我看到了一个削减状态。 检查Chrome和Firefox。 无法获得正确的内容。 什么想法可能是错的？ 提前致谢。 更新 还尝试在每个pushstate上递增一个全局变量并将其添加到状态。 事实certificate，对于特定情况，我提到全局变量变为值48而不是49意味着它正在拾取最后但只有一个事件。 我没有看到我的popstate处理程序被调用。 不知道发生了什么。 另一个更新 当我调用history.pushState（content，null，“”）两次时它可以正常工作。 （只在一个地方，在另一个地方，我仍然称它为一次）。 看起来由于某种原因，浏览器返回的是最后一个状态。 […]

当hashchange发生时，IE不会触发popstate

我有使用history API和push / popstate在客户端进行路由的页面。 它适用于所有现代浏览器。 （node.js预渲染器将支持搜索引擎） 但是，我最近碰到了一个问题，即IE不会在hashchange上激活popstate，而pushstate与url的工作正常，包括IE11。 例如，像这样…… $(document).on(‘click’, ‘a’, function(e) { e.preventDefault(); History.pushState({}, ”, $(this).attr(‘href’)); }); ……正确地发射…… $(window).on(‘popstate’, function() { console.log(‘url changed’); }); 根据W3C规范，hashchange应该触发popstate，因为它正在改变当前的历史记录。 但是，当我添加哈希链接（ … ），在IE上单击它时，什么都不会触发。 ：/ 我不想做IE检测（因为现在有很多浏览器可能会陷入同样的​​厄运），而不是使用特征检测。 但是，由于历史（popstate / pushstate）在其余部分工作得很好，我甚至无法检测到丢失的push / popstate上的问题…… if(!window.history || !window.history.pushState) { … …而是使用hashchange代替。 ：/ 有什么想法吗？ PS。 作为奖励，使用jquery.history.js（jquery包装的history.js版本）和hashtag url将整个事情搞得一团糟。 http://localhost/routetest/index.html#/page1/1234 变 http://localhost/page1/1234 …… ??? ：/

使用AJAX / jQuery加载页面和history.pushState（）方法保留浏览器“后退”按钮function

我想通过AJAX（jQuery load方法）加载页面并通过history.pushState方法将URL推送到浏览器栏时保留后退按钮function。 单击浏览器后退按钮时出现问题，第一次单击仅恢复以前的URL但不加载上一页。 到目前为止，这是我的代码： $(function(){ var profile_url= “/profile”; $(‘#click_button’).click(function(){ $(‘#main_content’).load(profile_url); history.pushState({profile:profile_info}, “profile”, profile_url); }); }); 我的问题是，有没有办法在第一次单击后退按钮时将上一页的AJAX加载到#main_content div中？ 任何帮助/建议将不胜感激。

更新浏览器的URL而不重新加载页面

是否可以更改浏览器地址栏中显示的URL而无需浏览器转到该页面？ 例如，在通过AJAX调用更新页面内容之后？ 我的理解是这是不可能的，这就是为什么诸如twitter和facebook之类的网站更新了ajax调用的hash-tag。 直到今天，当我继续使用http://8tracks.com/并开始使用右侧的filter…打开和关闭不同类型时，我注意到即使它正在执行ajax调用刷新页面上的内容，URL也在动态更新。 有谁知道他们是怎么做到的？ （除此之外，我目前正在使用Chrome，但当我回过头来再次使用IE9时，我注意到该url未被更新..这可能只是Chrome的一部分吗？）

回到使用ajax的pushState条目

我遇到以下情况的问题。 用户访问网站 用户单击使用history.pushState更新URL的链接 通过ajax加载的部分页面内容（使用jQuery） 用户单击加载新页面的常规链接 用户单击返回以返回pushState条目 该页面现在仅显示通过ajax检索的页面部分 我已经使用pushState为各种事情增加了一个网站，结果是一个令人震惊的响应式网络应用程序，但这个问题阻止我使用它。 以下是代码示例： $(‘a’).live(‘click’, function(){ history.pushState({}, ”, this.href); popstate(this.href); return false; }); popstate = function(url){ $(‘#content’).load(url); } window.onpopstate = function(event){ popstate(window.location.href); event.preventDefault(); } 笔记： 在window.onpopstate函数中发出警报时，似乎在步骤5中未触发该事件。这是一个错误吗？ 只有在使用ajax时才会出现此问题。 我不得不分开popstate函数，所以我可以在pushState之后调用它。 有没有办法手动触发window.onpopstate事件？

Backbone.js路由而不更改url

我正在将基于Backbone.js和jQuery的单页Web应用程序迁移到Chrome扩展程序。 但是， pushState和基于hashbang的路由器模式似乎都不适合扩展中的环境。 我得出的结论是，我最好只是直接渲染用户交互视图，完全绕过window.location系统。 但是，我不太确定如何实现这一点，而无需在几十个文件中更改对Router.navigate调用。 是否有可插拔/模块化的方式来保持Backbone路由系统但绕过对URL的任何更改？