标签: pushstate

我使用S3来托管一个将使用HTML5 pushStates的javascript应用程序.问题是如果用户为任何URL添加书签,它将无法解析为任何内容.我需要的是能够获取所有URL请求并在我的S3存储桶中提供root index.html,而不仅仅是执行完全重定向.然后我的javascript应用程序可以解析URL并提供正确的页面.

有没有办法告诉S3为所有URL请求提供index.html而不是重定向？这与设置apache以通过提供单个index.html来处理所有传入请求类似,如下例所示:https://stackoverflow.com/a/10647521/1762614.我真的想避免运行Web服务器来处理这些路由.从S3做一切非常有吸引力.

我正在研究使用HTML5 History API解决与AJAX加载内容的深层链接问题,但我正在努力开始.有没有人知道有什么好的资源？

我想使用它,因为它似乎是一种很好的方式,允许发送链接的可能性可能没有JS打开.当有人向JS发送链接给某人时,很多解决方案都会失败.

我最初的研究似乎指向JS中的History API和pushState方法.

http://html5demos.com/history

有人知道Internet Explorer是否支持操作浏览器历史记录的方法history.pushState()和history.replaceState()方法吗？考虑到这些只是在Firefox 4中实现,我不是屏住呼吸,但有人知道他们是否会进入IE9？

因此,现在HTML5引入history.pushState了更改浏览器历史记录,网站开始将其与Ajax结合使用,而不是更改URL的片段标识符.

可悲的是,这意味着不再能够检测到这些呼叫了onhashchange.

我的问题是:是否有可靠的方法(黑客？;))来检测网站何时使用history.pushState？规范没有说明引发的事件(至少我找不到任何东西).
我尝试创建一个外观并替换window.history为我自己的JavaScript对象,但它根本没有任何效果.

进一步说明:我正在开发一个需要检测这些更改并相应操作的Firefox附加组件.
我知道几天前有一个类似的问题,询问听一些DOM事件是否有效但我宁愿不依赖它,因为这些事件可能由于很多不同的原因而产生.

更新:

这是一个jsfiddle(使用Firefox 4或Chrome 8),显示调用onpopstate时不会触发pushState(或者我做错了什么？随意改进它!).

更新2:

另一个(侧面)问题是window.location在使用时没有更新pushState(但我已经在这里读到了这个,我认为).

现在有许多很酷的工具可用于制作功能强大的"单页"JavaScript网站.在我看来,这是通过让服务器充当API(而不是更多)并让客户端处理所有HTML生成的东西来完成的.这种"模式"的问题是缺乏搜索引擎支持.我可以想到两个解决方案:

1. 当用户进入网站时,让服务器完全按照客户端导航时的方式呈现页面.因此,如果我http://example.com/my_path直接访问服务器将呈现与客户端/my_path通过pushState时相同的事情.
2. 让服务器只为搜索引擎机器人提供一个特殊的网站.如果普通用户访问http://example.com/my_path服务器应该给他一个JavaScript重型版本的网站.但是,如果谷歌机器人访问,服务器应该给它一些最小的HTML与我希望谷歌索引的内容.

这里将进一步讨论第一种解决方案.我一直在网站上做这个,这不是一个非常好的经历.这不是DRY,在我的情况下,我必须为客户端和服务器使用两个不同的模板引擎.

我想我已经看到了一些优秀的Flash网站的第二个解决方案.我比第一个更喜欢这种方法,并且在服务器上使用正确的工具,它可以非常轻松地完成.

所以我真正想知道的是:

• 你能想到更好的解决方案吗？
• 第二种解决方案有哪些缺点？如果谷歌以某种方式发现我没有像普通用户那样为谷歌机器人提供完全相同的内容,那么我会在搜索结果中受到惩罚吗？

很多人一直在说,使用pushState而不是hashbang.

我不明白的是,如果不使用hashbang,你将如何成为搜索引擎友好的？

据推测,您的pushState内容是由客户端JavaScript代码生成的.

因此情况如下:

我在example.com.我的用户点击了一个链接:href="example.com/blog"

pushState捕获单击,更新URL,从某处获取JSON文件,并在内容区域中创建博客文章列表.

使用hashbangs,google知道转到escaped_fragment网址以获取其静态内容.

使用pushState,Google只会看到任何内容,因为它无法使用JavaScript代码加载JSON并随后创建模板.

我能看到的唯一方法是在服务器端渲染模板,但这完全否定了将应用程序层推送到客户端的好处.

所以我说得对,pushState对客户端应用程序来说根本不是SEO友好的吗？

我正在开发一个网页,根据我执行相应动画的下一步或后退动作,使用pushstate时会出现问题.当我收到活动时,如何知道用户是否使用Pushstate API点击了后退或转发历史记录按钮？或者我是否必须自己实施某些内容？

我已经阅读了十几次,因为状态对象可能存在多个键值对,并且它与新的历史条目相关联.但有人可以给我一个状态对象的好处的例子吗？它的实际用途是什么？我无法想象为什么不只是输入{}

我在Firefox的控制台中收到了这个错误:SecurityError: The operation is insecure有罪的是HTML5功能:window.history.pushState()当我尝试使用AJAX加载某些内容时.它应该加载一些数据但Javascript在错误时停止执行.

我想知道为什么会这样.这是一些服务器配置错误吗？任何帮助,将不胜感激.

更新:是的,这是一个服务器错误,域名不匹配:http://en.wikipedia.org/wiki/Same-origin_policy

当涉及到js时,我几乎是一个新手,所以如果我遗漏了一些非常简单的话,我很抱歉.

基本上,我已经做了一些关于使用history.pustate和popstate的研究,我已经做了,所以通过使用查询字符串添加到url(?v=images)或(?v=profile)...(v意思是"视图")的末尾这个:

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

我想这样做,所以我可以将内容加载到div但不重新加载我使用该.load()功能完成的页面.

然后我使用了这段代码:

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

在$(document).ready()部分和后来尝试只是<script>标签,但都没有工作.

我不知道如何制作它,所以当我使用后退按钮时内容会发生变化,或者至少让它变为可以触发我自己的功能; 我假设它与状态对象有关？!我似乎无法在网上找到任何清楚解释过程的内容.

如果有人可以帮助我,那将是惊人的,并提前感谢任何人!