Tag: html5 history

IE上的window.history.pushState问题: 我在我的网站上使用jQueryUI Auto-complete ，它是window.history.pushState ，它在不刷新页面的情况下更改了browser-url。它完全适用于Chrome和Mozilla但遗憾的是它无法按照我希望它在Internet Explorer 9上运行的方式工作。这是情况，使用jQueryUI Auto-complete我可以通过页面上的标签搜索区域，县和拉链。然后，如果我点击了自动完成的任何建议结果，则使用window.history.pushState ，浏览器url将从www.example.com/sites更改为www.example.com/sites/selected_region而不刷新页面。现在正如我所说，它适用于Chrome和Mozilla但它在IE9失败，因为当我点击jQueryUI Auto-complete任何建议结果时，它既不会更改浏览器url也不会关闭列表的建议。它肯定不支持window.histoty.pushState 。所以我搜索并找到了一个可能使用history.js的解决方案。我只是按照说明将它上传到我的服务器上并包含history.js文件，但事实certificate它与我正在使用的其他.js文件冲突。我该如何解决这个问题？提前致谢。 PS：这是我如何使用window.history.pushState $( “#find” ).autocomplete({ minLength: 1, source: function(request, response) { var results = $.ui.autocomplete.filter(locations, request.term); response(results.slice(0, 10)); }, focus: function( event, ui ) { $( “#find” ).val( ui.item.value ); return false; }, appendTo: “#results”, open: function(){ […]

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

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，“”）两次时它可以正常工作。（只在一个地方，在另一个地方，我仍然称它为一次）。看起来由于某种原因，浏览器返回的是最后一个状态。 […]

使用scrollspy更新地址栏window.location哈希: 我有一个带有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会触发浏览器导航到相应的锚点。这会触发连锁反应，用户将立即在页面顶部结束。 js-fiddle中的演示现在解决这个问题最简单的方法是什么？

我应该使用iframe而不是ajax吗？: 我们正在构建一个带有音频播放器的Drupal站点，该站点应该在您浏览页面时继续播放（类似于soundcloud）。目前我们正在使用ajax加载点击的网站，并将html注入页面并使用history.js来操纵位置。但是有一个主要的缺点：由于新加载的页面上可能有不同的css和js，我们必须将当前脚本，样式和链接元素与ajax响应文本（丑陋的正则表达式）进行比较，并且只添加新的但不存在的元素。通过这样做，加载另一个页面一旦执行脚本就不会删除/删除/撤消。这可能会成为一个性能问题（反正是针对标记的正则表达式）。使用iframe可以解决这个问题和其他问题：首次单击站点上的链接时，页面内容将替换为仅加载页面的iframe。音频播放器位于原始dom中，即在iframe之外。单击iframe内的链接可以在历史API中捕获并使用。所以，虽然我从未想过我会这么认为：我认为使用iframe可能是更好的选择，不是吗？ PS：我的主要问题是我无法控制网站上的不同页面有不同的脚本，样式确实没问题。如果网站上只有一个巨大的静态js和css，我没有遇到任何问题。更新除了在iOS中，iframe解决方案工作正常。 iframes就像地狱一样。不过，我认为我们将采用iframe解决方案。

设置URL参数而不会导致页面刷新: 如何使用History.pushState()设置URL参数以避免浏览器刷新？如果有一个不简单的JS解决方案，是否已经有一个流行的库或jQuery的内置函数？这是一个相关的SO问题，其中接受的答案实际上根据评论和我的测试不起作用（它删除查询字符串而不是更新值）： history.pushState（）更改查询值为了清楚起见，我指的是查询字符串中的url参数： http://google.com/page?name=don ： http://google.com/page?name=don tim don所以我们可以将don更改为tim而不会导致重新加载。这是我找到的一种可能的解决方案。但是我对使用只有2个粉丝的JS库感到紧张：P

带有history.pushState和popstate的Ajax – 当popstate state属性为null时，我该怎么办？: 我正在尝试使用ajax加载内容的HTML5历史API。我有一堆通过相关链接连接的测试页面。我有这个JS，它处理这些链接的点击。单击链接时，处理程序会获取其href属性并将其传递给ajaxLoadPage（），该页面将所请求页面中的内容加载到当前页面的内容区域中。（我的PHP页面设置为在正常请求时返回完整的HTML页面，但只有一小部分内容，如果？fragment = true附加到请求的URL。）然后我的click处理程序调用history.pushState（）以在地址栏中显示URL并将其添加到浏览器历史记录中。 $(document).ready(function(){ var content = $(‘#content’); var ajaxLoadPage = function (url) { console.log(‘Loading ‘ + url + ‘ fragment’); content.load(url + ‘?fragment=true’); } // Handle click event of all links with href not starting with http, https or # $(‘a’).not(‘[href^=http], [href^=https], [href^=#]’).on(‘click’, function(e){ e.preventDefault(); var href = $(this).attr(‘href’); […]

jQuery绑定popstate事件未通过: 我正在为History API编写一个小程序。我正在努力解决这个问题： $(window).bind(‘popstate’, function(event) { console.log(‘pop: ‘ + event.state); }); 当我点击“上一步”按钮时，它会记录’pop：undefined’… 但是，如果我这样做，事情就像预期的那样： window.onpopstate = function(event) { console.log(‘pop: ‘ + event.state); }; 它这次记录’pop：[object Object]’… 所以就像jQuery没有将事件对象传递给回调。 jQuery有问题吗？或者我弄乱了什么？

将参数附加到URL而不刷新: 我知道之前已经多次询问过，但答案的描述性不足以解决我的问题。我不想更改页面的整个URL。我想在按钮点击时追加参数&item=brand而不刷新。使用document.location.search += ‘&item=brand’; 使页面刷新。使用window.location.hash = “&item=brand”; 追加而不刷新，但使用散列# ，消除了参数的用法/效果。我试图在追加后删除散列，但这不起作用。这个答案和许多其他人建议使用HTML5 History API，特别是history.pushState方法，而对于旧浏览器则是设置片段标识符以防止页面重新加载。但是怎么样？假设URL为： http://example.com/search.php?lang=en ： http://example.com/search.php?lang=en 如何使用HTML5 pushState方法或片段标识符附加&item=brand以便输出如下： http://example.com/search.php?lang=en&item=brand ： http://example.com/search.php?lang=en&item=brand ？lang &item=brand en &item=brand没有页面刷新？我希望有人可以说明如何使用HTML5 pushState将参数附加到现有/当前URL。或者，如何为相同目的设置片段标识符。一个很好的教程，演示或一段代码与一点点解释将是伟大的。演示到目前为止我所做的一切。非常感谢您的回答。