问题标签 [pushstate]

很多人一直在说，使用 pushState 而不是 hashbang。

我不明白的是，如果不使用 hashbang，您将如何对搜索引擎友好？

大概您的 pushState 内容是由客户端 JavaScript 代码生成的。

因此，情况是：

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

pushState 捕获点击，更新 URL，从某处获取 JSON 文件，并在内容区域创建博客文章列表。

使用 hashbangs，谷歌知道去 escaped_fragment URL 来获取他们的静态内容。

使用 pushState，Google 什么也看不到，因为它不能使用 JavaScript 代码加载 JSON 并随后创建模板。

我可以看到的唯一方法是在服务器端呈现模板，但这完全否定了将应用程序层推送到客户端的好处。

所以我说对了吗，pushState 对客户端应用程序根本不友好吗？

从GitHub 的博客中可以看出，他们已经实现了HTML5 的 JavaScriptpushState功能用于树浏览（适用于现代浏览器），带来了没有 Hash Bangs的 AJAX 导航。

代码很简单：

这非常优雅地允许他们：

1. 通过 AJAX 请求新内容而不是整页
2. 动画过渡
3. 并更改浏览器 URL （不仅仅是#，就像 Twitter 所做的那样 — twitter.com/stackexchange → twitter.com/#!/stackexchange）

我的问题是，JavaScript 如何防止pushState一个网站使用模仿另一个网站，从而导致令人信服的网络钓鱼攻击？

至少域似乎无法更改，但是站点内的多个路径可能由多个不相关且不信任的内容提供者提供呢？一条路径 (IE /joe ) 是否可以本质上模仿另一条路径 (pushState /jane ) 并提供具有可能恶意目的的模仿内容？

我对以下情况有疑问。

1. 用户访问网站
2. 用户单击使用 history.pushState 更新 url 的链接
3. 通过 ajax 加载的部分页面内容（使用 jQuery）
4. 用户单击加载新页面的常规链接
5. 用户点击返回返回 pushState 入口
6. 该页面现在仅显示通过 ajax 检索到的页面部分

我已经使用 pushState 为各种事情增加了一个站点，结果是一个响应速度惊人的 Web 应用程序，但是这个问题阻止了我使用它。

这是代码示例：

笔记：

• 在 window.onpopstate 函数中放置警报时，似乎在第 5 步未触发该事件。这是一个错误吗？
• 仅在使用 ajax 时才会出现此问题。
• 我不得不分离 popstate 函数，以便在 pushState 之后调用它。有没有办法手动触发 window.onpopstate 事件？

如何为 history.pushState() 和 window.onpopstate 添加回退函数？我需要一种 if..else 的逻辑。如果浏览器支持继续，否则我需要一个替代逻辑。即使在某些现代浏览器中也不支持它，例如。在 iPad 中。如果不是 pushState，我需要在 JS 中捕捉浏览器的后退按钮单击，而不会出现无限循环。

该pushState方法接受一个状态对象。Firefox 文档说这个对象的最大大小是 640kb。规范中是否定义了浏览器可以实现的最小最大尺寸是多少？我可以合理地期望主流浏览器为我提供至少 100kb 的空间吗？

编辑：我用 Chrome 对其进行了测试，它仍然适用于超过 1MB 的状态对象。

我一直在研究利用 HTML5 的历史 API 又名 psuhState 的最佳方法，并为 HTML4 浏览器提供适当的后备。

Github 使用 history api 进行树浏览（以下链接只是一个示例，不是 github 使用的库）：

https://github.com/browserstate/History.js/

我不知道他们如何为 Firefox 3.5 等 HTML4 浏览器处理此功能？

我特别查看了history.js（上面链接）来处理这类事情。但它需要我想避免的 HTML4 浏览器的 hash # 实现。

如果您访问 Github 并使用 HTML4 浏览器浏览目录树，它看起来与 HTML5 浏览器相同（即 url 状态）。

如果我在 FF3.5 中禁用 JavaScript，之前的 URL 如下所示：

https://github.com/browserstate/history.js/tree/master/tests

现在看起来像这样：

https://github.com/browserstate/history.js/tree/a32e91aa1fe5909a29abb690a37f6c129e98068e/tests

有什么想法吗？

我目前正在尝试建立一个新网站，没什么特别的，又好又小，但我一开始就卡住了。我的问题是干净的 URL 和页面导航。我想以“正确的方式”去做。

我想拥有的：

• 我使用 CodeIgniter 来获取干净的 URL，例如 “www.example.com/hello/world”
• jQuery 帮助我使用 ajax，所以我可以 .load() 附加内容
• 现在我想使用像 pushstate 这样的 HTML5 功能来摆脱 URL 中的 #

应该可以在不刷新页面的情况下来回切换，但页面仍将根据当前 URL 显示正确的内容。

也应该可以重新加载页面而不会出现 404 错误。由于 CodeIgniter，该网站应该存在。（有一个控制器和一个视图）

例如：
一个非常基本的网站。两个链接，称为“foo”和“bar”，它们下方有一个空的 div 框。基本 URL 是 example.com
当您单击“foo”时，URL 会更改为“example.com/foo”而无需重新加载，并且 div 框会使用 jQuery .load() 获取新内容。其他链接也是如此，当然只是内容和 URL 不同。
单击“foo”然后单击“bar”后，后退按钮会将我带回具有相应内容的“example.com/foo” 。如果我直接加载此链接或刷新页面，它看起来会一样。没有404错误什么的。

想想这个页面，然后告诉我你会怎么做。我真的很想拥有这种导航，所以我尝试了几件事。

到目前为止......
我知道如何使用 CodeIgniter 来获取这样的 URL。我知道如何使用 jQuery 加载其他内容，虽然我不完全理解 html5 pushstate 的东西，但我至少让它以某种方式工作。但我不能让它一起工作。我现在的代码很乱，这就是我不想在这里发布的原因。我查看了不同的教程并将一些代码复制粘贴在一起。我想上传我的 CI 文件夹会更好。

我看过的一些教程：

• 深入了解 HTML5
• HTML5 演示
• Mozilla 操纵浏览器历史记录
• Saner HTML5 历史
• Github：历史.js

（达到的最大链接数：/）

我认为我的主要问题是，每个人都试图使其与所有浏览器和不同版本兼容，添加脚本/jQuery 插件等等，我对所有附加代码感到困惑。我的脚本标签之间有更多的代码，然后是实际的 html 内容。有人可以发布最基本的方法如何在我的示例页面中使用 HTML5 吗？

我失败的尝试：
在我的测试页面上，当我返回时，URL 发生了变化，但 div 框仍将显示相同的内容，而不是旧的。我也不知道如何根据链接中的 href 属性更改脚本中的 URL。有没有像 $(this).attr('href') 这样的东西，会根据我点击的链接而改变？现在我必须为每个链接使用一个脚本，这当然很糟糕。当我刷新站点时，CodeIgniter 启动并加载视图，但实际上只有视图本身，即我用 ajax 加载的视图，而不是整个页面。但我想这应该很容易通过布局和正确的控制器设置来解决。还没有太关注这个。

提前感谢您的帮助。如果您有建议、想法或简单的只想提点什么，请告诉我。

关于
迪勒

I'm working on a site that has a basic slider with 4 slides that go left and right that only shows 1 slide centered in the page. All the slides' content are loaded on a single page each within it's own div.

Nothing fancy. Also each slide is associated with a link:

So I started using History.js to link up each slide with it's respective link; www.example.com/about. I can change the state with no issue; back and forward work and the URL changes.

What I did happen to notice is that if I load the page with a false URL like, www.example.com/about, the page returns a 404.

What can I do to prevent the 404 from occurring, but also making sure the page is taken to the correct slide?

Is there another way I should be doing this?

I'm in a LAMP stack with jQuery and HTML5.

I'm really stuck on this one...thanks!

symfony：http ://www.symfony-project.org pjax：https ://github.com/defunkt/jquery-pjax

大家好，

我正在尝试在 symfony 中使用 pjax 以加快我们的网站速度（我们将能够在大多数情况下保持页眉和页脚静态，并避免重新加载大量 css/js 和其他文件）。

我对ajax或symfony没有问题，但我想知道是否有更好的方法：

1. 使用 postExecute 立即返回 html 代码而不用 sf 去模板是个好主意吗

2. 如果是这样，我可以以某种方式只为所有模块编写一次吗？我想我可以做到：

   mySfActions 扩展了 sfActions

   moduleActions 扩展了 mySfActions

我想知道是否有更好的方法？3. 有没有办法在控制器/动作中获取当前布局名称（在模块的 view.yml 中定义）？

我正在使用 AJAX 和历史对象（使用.pushState方法）。我只想知道什么时候调用pushState方法合适？是在请求之前吗？请求后？或者我应该在 XMLHttpRequest 的什么状态下readyState调用它？尽可能地，我希望它表现得像一个正常的请求（没有 AJAX）。