以下内容是来自 Jesse Shawl 的客座文章。
在 2012 年 5 月，Chris 更新了之前关于 动态页面替换内容 的文章。这篇文章是对该更新的更新，它使用 HTML5 历史记录 API 来提供更好的用户体验。
以下是最佳实践的简要回顾
- 在禁用 JavaScript 时也能正常工作。
- 可以“深层链接”到特定内容。
- 浏览器的后退按钮和前进按钮按预期工作。
URL 哈希的问题
对于单个用户来说，现有演示 很好地满足了标准，但 URL 是永久地址，它们会被共享。
考虑以下场景
- 我有一个带有启用 JavaScript 的精美浏览器。我在浏览演示站点，发现了一款很棒的产品，我想与朋友分享。
- 我复制了 URL “http://example.com/#awesome-product”，并发送给我的朋友。
- 我的朋友没有启用 JavaScript。她在浏览器中打开链接，发现“awesome-product”没有按预期加载，感到困惑。
- 她感到困惑/沮丧，并发誓再也不访问 example.com。
这是一种糟糕的用户体验！
今天，我们将改进现有的演示，使动态页面替换内容不再依赖于哈希。
Modernizr 用于渐进增强
注意：以下示例基于之前的演示构建。下载文件 这里 以便跟着操作。
如果你还没有使用 Modernizr，那就去下载它吧（我会等你的）。它是使用 JavaScript 检测浏览器功能的最简单方法。
由于我们将使用 HTML5 历史记录 API，因此我们只需要选中“历史记录”复选框。从 这里 下载自定义构建。
将它包含在 HTML 文件的 <head> 中
<script src='js/modernizr.js'></script>测试 HTML5 历史记录支持非常简单
// dynamicpage.js
$(function() {
if (Modernizr.history) {
// history is supported; do magical things
} else {
// history is not supported; nothing fancy here
}
});首先，我们将设置所有内容来操作浏览器的历史记录，然后添加来自之前演示的所有精美加载内容。
使用 HTML5 历史记录 API 操作历史记录
HTML5 的 history.pushState() 方法允许我们
- 更改 URL
- 不使用哈希
- 不刷新页面（这是动态页面替换内容发生的地方）
- 更新浏览器的历史记录栈
- 这样我们就可以使用后退和前进按钮点击浏览历史记录。
pushState() 方法接受三个参数
history.pushState(stateObject, "title", URL);在本示例中，我们只提供 URL，但你可以在 Mozilla 开发者网络 上了解有关历史记录 API 的更多信息。
更改 URL 后，我们将需要设置一个函数来加载内容 - loadContent() 似乎是一个不错的名称。
$(function() {
if (Modernizr.history) {
// history is supported; do magical things
// hijack the nav click event
$("nav").delegate("a", "click", function() {
_href = $(this).attr("href");
// change the url without a page refresh and add a history entry.
history.pushState(null, null, _href);
// load the content
loadContent(_href); // fear not! we're going to build this function in the next code block
});
} else {
// history is not supported; nothing fancy here
}
});现在，我们只需要编写 loadContent() 函数，这只需从原始示例中获取代码即可。
代码片段
// set up some variables
var $mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
// calculate wrapper heights to prevent jumping when loading new content
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function() { // fade out the content of the current page
$mainContent
.hide()
.load(href + " #guts", function() { // load the contents of whatever href is
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href$='" + href + "']").addClass("current");
});
});
}处理浏览器后退和前进按钮点击
此时，内容以一种精美的 Ajax 方式加载，但点击后退按钮不会让我们返回……还没有。
历史记录 API 使我们能够访问 popstate 事件，该事件在历史记录栈发生变化时触发（即点击后退和/或前进按钮）。每当此事件触发时，我们只需要调用 loadContent() 函数即可。
$(window).bind("popstate", function() {
link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
loadContent(link);
});一个小作业
在撰写本文时，popstate 事件在 Chrome 中页面加载时发生。这意味着正在发出两个请求
- 对 whateverpage.html 的原始 http 请求
- 由我们
loadContent()函数中的$.load发出的请求
有几种不同的方法可以处理这个问题，但我让你决定哪种方法最适合你。
如果你仍然支持禁用 JavaScript 的用户，那么你就是问题的一部分，而不是解决方案。
Web 开发人员需要停止浪费时间迎合一小部分互联网用户，而是帮助推动 Web 发展，使 Web 成为一个对使用“旧版 IE”或禁用 JavaScript 的用户来说不好的地方。
2013 年使用 Web 就意味着使用 JavaScript。
我 100% 同意。
尤其是“停止浪费时间迎合一小部分互联网用户”。
同意
同上。
我同意这一点……我在自己开发大多数网站时完全忽略了旧版 IE。然而，我的公司与很多州交通部和其他政府机构合作，这些机构需要 IE7、IE8 和其他糟糕的东西。所以，尽管我不想成为问题的一部分，但我工作和薪水有时取决于它。:-/ 如果你想责怪某个人，那就责怪那些行动缓慢的政府机构吧。
虽然我同意，明确禁用 JavaScript 的用户可能只占一小部分，而且他们可能没有意识到自己禁用了 JavaScript，而且未来的发展方向是普遍放弃向后兼容的做法，但我认为，肯定也有一些情况，客户要求做一些超出他们意识范围的事情，并期望对所有客户保持兼容性，即使是那些可能没有启用 Java 的极少数用户，对于这些情况，我真的很高兴拥有像这个网站这样优秀的资源来提供针对这些特定场景的帮助。
感谢 Chris 和 Jesse！
为了记录，这个演示就是这么做的：对非 JS 用户没有任何特殊之处。但是，它可以正常工作。
我也不敢对是否选择支持非 JS 用户这样的事情抱有教条主义，我曾经做过很多几乎忽略了非 JS 案例的应用程序，这从来没有成为一个大问题。
有人有关于不使用 JS 的用户比例的统计数据吗？我估计这个比例非常小。
明确禁用 JS 的用户比例很小。但用户使用疯狂的 GreaseMonkey 脚本和 Chrome 扩展来破坏你的 DOM 并破坏你的 JS 的比例很大，尤其是在你的受众是开发人员的情况下。渐进增强万岁。
我同意 Ben 的观点。这不是关于支持禁用 JS 的用户，而是关于不破坏 Web 惯例。
当那个第三方脚本在生产环境中抛出 JS 错误时，你没有对解决方案进行渐进增强，会发生什么？= 损坏的 URL。
禁用 JavaScript 后，不需要担心用户，而是要担心搜索引擎。
如果内容只能通过 JavaScript 函数启用，搜索引擎将无法抓取和索引它。
我非常同意 Jon 的观点。如果我们总是迁就开发者社区，用户就不会有升级的必要性。也就是说，我认为更有效的做法是说服用户，而不是让他们看到一个难看且无法正常运行的网站。
我更倾向于看到开发者社区普遍采用一种方法，向用户告知他们没有使用 JavaScript，应该更新浏览器或在脚本拦截器中将网站列入白名单。礼貌和帮助对推动人们采用新技术非常有效，特别是对于那些从早期 IE 之后就从未升级过浏览器的人来说。
也许我们应该忽略没有使用 JavaScript 的用户，也许不应该。这并不重要。你不能说“网页开发者需要停止浪费时间”，因为他们并没有浪费时间！你知道让所有用户都满意有多难吗？你知道如果一个开发者能够做到这一点，那么他/她肯定有资格被称为专家、大师、技艺精湛的人，或者任何你想要叫他/她的名字。网页开发（包括设计、编程、将两者结合起来、个性化你的应用程序，使它们更易于访问、更友好、更简洁、更易于使用，管理内容，创建 CMS）不仅仅是为了快速赚钱。至少，在我看来是这样。如果一个开发者真的喜欢他/她所做的事情，如果他/她热爱自己的工作，并且它不仅仅是爱好，那么他/她也会随时乐意学习新事物，锻炼自己的技能，成为一名更好的设计师。这并不是关于……在 2013 年使用 JavaScript，或者类似的事情。而是关于 **渴望写出更好的代码，设计出更好的作品，开发出更好的产品。** 为了你自己。
我认为你们中的许多人忽略了这一点，没有理解其中的情况。
如果你正在构建一个展示你的摄影作品的个人作品集网站，你可能不需要考虑那些没有启用 JavaScript 的用户。如果你正在构建一个服务数百万乃至数亿用户的企业级网页门户，那么我 **绝对** 认为你需要考虑他们。虽然你们中的 90% 可能会不在乎那些没有使用 JavaScript 的用户，但仍然有大量的用户需要我们去支持他们。
@Jonathan Graft 提出了一个很好的观点，我们许多在网页领域工作的人仍然需要为州级交通部门和政府网站开发和编写代码，而这些网站有法律上的网页要求。
许多人也没有意识到，特别是在企业环境中构建的网站 **需要** 强劲的浏览器兼容性和渐进式增强。 **以任何形式拒绝客户，就可能意味着拒绝未来的业务。** 仅仅因为你使用的是最新版本的 Chrome 或 Firefox，并不意味着在银行工作的 Joe Schmoe 仍然卡在 IE7 上，需要使用你的网站。Joe Schmoe 的 IT 策略也可能默认情况下将他们的浏览器的 JavaScript 关闭。成功的商业依赖于满足客户的需求，而不是你的需求。
回想一下十年前甚至更久之前，Flash 网站随处可见。没有一家企业会做一个“Flash”网站，而且只做一个 Flash 网站。几乎总是会有一个普通的网页版本。为什么？因为许多人没有安装 Flash，他们也不想排斥潜在客户。
虽然说我们不应该再做或支持某些事情，这可能很美好，但请确保你在做出这样的决定之前，了解它可能带来的影响。
虽然我同意支持这些用户可能很繁琐，但直到网页朝更标准化的方向发展，我们仍然需要照顾那些跟不上步伐的人。
我认为作为一名网页开发者，你应该了解网页的设计初衷。Mark Massé 在 REST API 设计规则手册中解释道：
换句话说，我认为忽视那些没有启用 JavaScript 或使用旧浏览器用户的做法是不明智的，相反，应该以优雅降级为目标进行开发。
我同意。如果你现在不使用 JS，那就离开互联网吧。
许多跟踪技术需要 JS 来完成工作。
NoScript 是 Firefox 最受欢迎的扩展程序之一。甚至德国政府也建议公民使用它。
故意禁用 JS 的用户更有可能比其他人更关注隐私问题，因此他们也可能会阻止其他统计方法（如网页错误）。
因此，如果没有 JS，就更难跟踪和统计访问者。许多跟踪方法会忽略他们。所以，如果你想知道有多少访问者禁用了 JS，这些统计数据本身就有缺陷。
这种方法支持哪些浏览器？
大多数现代浏览器！https://caniuse.cn/#feat=history。由于我们正在实践渐进式增强，因此该网站在不支持历史 API 的浏览器中也能正常运行。
一个小小的提示，从 jQuery 1.7 开始，
delegate()已被on()取代 - 你可能需要更新一下！Jesse 的后续评论很好。让我补充一点。在 Facebook 上分享链接时，它会抓取页面的标题和元描述。通过使你的网站在没有 JavaScript 的情况下也能正常运行，这将是成功开展社交和搜索活动的第一步。
除此之外，我参与过一个项目，大约一年前我们实现了类似的设置。跳出率从 43% 显著下降到 7%。每次访问的平均页面数从 3% 上升到 14%。网站的平均停留时间增加了两倍，页面浏览量在发布后的第一周增加了七倍。以前无法在 Facebook 上分享的内容现在可以分享了。Google 和 Bing 可以访问所有文章。页面刷新更少，加载速度更快。更完善的分析。哦，多么棒的体验啊！
现在，如果我们能够将你的代码应用到我们现在网站上使用的所有图片库、幻灯片、视差滚动、模态窗口等等，那就太好了。想想分享会变得多么容易！
（不会干扰后退按钮，让我们能够按自己的意愿使用它。）
嗯……这将有助于无限滚动……如果这真的有可能的话。
http://www.usabilitypost.com/2013/01/07/when-infinite-scroll-doesnt-work/
想象一下，当你滚动时 URL 也会发生变化，这样你就可以将你上次停止的位置添加书签。这样就可能不需要分页。
你提到了一个很好的观点，即让你的网站核心在没有 JavaScript 的情况下也能正常运行，因为所有搜索引擎和社交网站都很重要。流量非常宝贵，我们不能让你的网站对那些忽略 JavaScript 的机器人不友好。
这其实并不难。我不想说太尖刻，但这可能是开发者的懒惰。你应该构建一个基本的网站前端，它在没有 JS 的情况下也能正常运行，然后用你提到的最新趋势来增强它。
也许我只是在发泄，因为我遇到了太多使用无限滚动的网站，我无意中点击了一些东西，当我返回时，它又从头开始。不！！！ *向天空挥拳*
我同意 @Jon Hobbs 的观点，关注那些用户几乎没有意义。
但是，是否可以在服务器端解决着陆页 URL 哈希的问题？
也许你可以，但哈希主要用于避免与服务器进行多次交互，从而节省 HTTP 请求，减少烦人的页面刷新。如果这个演示没有连接到 Google 的 CDN 来获取 jQuery 文件，你就可以在禁用互联网连接的情况下导航标签。将网站保存在本地，断开连接，然后试一试。如果服务器需要参与，这将不可能实现。
希望这对你有所帮助。
我做错了作业。:) 如何防止 popstate 事件在页面加载时触发？
这是我正在使用的技巧
啊，我想编辑我的评论，但做不到。应该使用的 jQuery 函数是
live（而不是delegate和on）。@Guilherme “on” 仍然是正确的。来自 jQuery API：“从 jQuery 1.7 开始，.on() 方法提供了所有用于附加事件处理程序的功能”。如果你想将 on 视为 live，你可以从 body 委托它，这仍然比以前 live 方法（使用 document）更高效。显然，你委托的树越低，效率就越高。
$("body").on("click", "a", function(){});我做错了作业。主要是因为我对 JavaScript 不熟悉。如何实现这个修复？
两点说明：第一，如果你只是想检查 `window.history.pushState` 是否定义，就没必要加载像 Modernizr 这样的大型库。使用脚本标签会阻塞渲染，并增加一些额外的服务器往返，仅仅是为了替换十几字节的 JavaScript 代码。
第二，针对那些主张忽略没有 JavaScript 的用户的人，请记住 Gawker、Twitter 等网站在这样做时发生了什么？你的 JavaScript 代码中任何错误、用户网络连接问题等等都会导致你的网站崩溃，让你看起来很糟糕。这就是为什么每个人都放弃了这种策略的关键原因。换句话说，如果你使用渐进增强，你的网站仍然看起来很棒，但不需要额外的工程工作就能快速加载、健壮、与搜索引擎和其他机器人良好配合等等。
使用 Modernizr 的好处是，它们总是更进一步，处理你可能没有想到的特性测试中的奇特之处。
在这个例子中，History 存在一个奇特之处
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js
@Chris Coyier：说得对。在这种情况下，实际的特性检测不到 200 字节，大约是我会内联它以避免额外的 RTT 的临界点。仅仅是 HTTP 请求头也会占用更多流量...
@Rob：主要观点是，脚本标签会阻塞进一步的页面加载和渲染，直到脚本完全运行。如果你需要支持老旧的 Android 版本，我会内联该脚本，以避免惩罚其他用户。
你不需要加载完整的 Modernizr 文件，在你的网站上，你可以选择你需要的任何选项，并下载一个小型的 js 文件。
Modernizr 的自定义构建是王道！我通常从一个完整的构建开始，然后在预发布检查中查看我实际使用的是什么，并只创建一个包含这些内容的自定义构建。顺便说一下，内联脚本仍然会阻塞。
另一个使用 Modernizr 的原因是，它包含 html5shiv（除非你明确要求它不包含），因此你可以满足那些不理解 `` 等标签的旧版 HTML5 浏览器。
我同意这种观点，即禁用 JavaScript 的用户通常会有糟糕的网络体验。话虽如此，我认为这是一个良好的实践，并且可以合理地预期内容的简单显示和加载不依赖于 JavaScript。
无论如何，我之前并不知道在不使用哈希且不刷新页面的情况下可以更改 URL。非常酷的技巧。
抱歉，也许是我遗漏了什么……但是，如果用户的 JavaScript 被禁用，基于 JavaScript 的解决方案如何让事情变得更好呢？
据我理解，这里的问题是发送给没有 JavaScript 的用户的 URL。这个修复创建了一个对双方友好的 URL。正如 Aaron 指出的那样，这使得内容更容易分享。
它不会对没有 JavaScript 的用户自己浏览网站做任何特殊的事情，但这无关紧要，因为这与上面概述的情况不同。
我也没有看到为什么 push 状态和 pop 状态比 URL 中的 #tag 后缀好太多。
不要忘记，当动态地将内容加载到页面时，你会加载 HTML 页面的一部分。如果你创建了对没有 JavaScript 的用户友好的 URL，你必须在服务器上实现一个第二个页面来显示完整的页面。
这意味着需要大量工作才能同时支持有和没有 JavaScript 的客户端！
对我来说不值得这个努力。
我支持那些说忘记没有 JavaScript 的用户的人。这些用户不太可能尝试访问你的花哨的现代网站，而没有启用 JavaScript，他们也不太可能关心朋友发送到这些网站的链接。对于现代 Web 开发，我更愿意相信 JavaScript 是一种标准功能，现实情况已经非常接近这个理想状态，以至于可以将其视为事实。没有必要浪费时间在收益微不足道的功能上。
我仔细阅读了你的文章，不幸的是，对我来说有点太技术性了。我会尝试更多地了解自己。
非常有趣的文章...感谢你的帖子！
如何使用双重回退？顺序是：pushstate、hashbang、normal。
这将极大地降低某人获得无法在没有 JavaScript 的纯粹主义者环境下工作的 URL 的风险，而不是完全消除风险。但是你让大约 10-20% 的用户获得了与现代浏览器用户相同的体验。如果像我一样，设计师想要缓慢变化的背景图片，这对于 UX 非常重要。
此外，人们经常忘记更新（例如）document.title（始终为此使用原生 JS）。否则，书签也会获得一个错误的标题。
代码
将生成一个邪恶的全局变量。
如果有人想知道：如果你在 JS 中遗漏了 var 关键字，它将隐式地成为一个全局变量。
我使用这个库来实现跨平台兼容性
https://github.com/balupton/history.js
它还提供了一个可选的回退机制，使用 #hashtags 在没有 History 的浏览器上获取变量。哈希并不真正优雅，但它确实可以完成任务。
我不知道其他任何库，这个库已经有一段时间没有更新了，但它仍然有效。
我一直使用它在 http://www.area.fr/ 上（不过没有使用 hashtags 回退支持）。
对于那些“禁用 JavaScript 的访问者”的仇恨者……当我创建网站时，我很少，甚至从不考虑这些访问者。但不知何故，我最终交付给客户的产品经过了渐进增强。为什么？因为客户关心分享和在搜索引擎中获得正确的索引。如果你的客户关心搜索和社交媒体，你必须考虑使用渐进增强。收取更多费用，教育你的客户——无论需要做什么。并不是所有客户都像耐克（nikeworld.com）那样，能够逍遥法外。他们是第一个使用视差滚动的人。他们有科比！
现在，我还在处理使用 Angular.js 和 Handlebars.js 的不同项目。我采用了离线优先的方法。 http://developer.chrome.com/apps/offline_apps.html 这意味着这个应用程序在禁用 JavaScript 时将完全无法工作。但这没关系，因为我们不希望社交媒体和搜索在只有人访问的应用程序中发挥作用。
希望这对你有所帮助。（
这简直太棒了。网站 URL 中没有模糊的哈希，而且 UX 也很酷。这两个例子都很好。
我并没有在没有 JavaScript 的用户身上投入太多精力，但主要针对跨浏览器；它在 IE7、IE8 及更高版本中运行良好。
这篇文章非常及时。我刚和客户讨论了单页面与多页面的问题，以及 JavaScript 与非 JavaScript 浏览器支持的问题。我构建的每个网站在关闭 JavaScript 后都能正常工作。我喜欢这样。我无法决定用户如何浏览网页，Google Analytics 也无法告诉我用户是否启用了 JavaScript，因为 GA 只能跟踪启用了 JavaScript 的用户。Modernizr 使这种方法变得简单，它允许我以功能为导向编写 CSS。
我必须试一下这个教程。它看起来非常干净。
这似乎在 IE 9 上不起作用。它没有动态加载内容，而是直接跳转到 href 中的链接。
我的朋友没有启用 JavaScript。她在浏览器中打开链接，发现“awesome-product”没有按预期加载，感到困惑。
这些人是谁？你为什么和他们做朋友？
太棒了！我遇到过这样一种情况：客户认为带有哈希符号的 URL 是错误的标志，而且看起来也不美观，我试图说服他，但徒劳无功。那是我最后一次为任何人实现 AJAX。这似乎是这个问题的答案，谢谢 Chris。
不幸的是，一些方法比如“history.pushState()” 不受旧浏览器的支持...
@ Chris (#comment-251890). 你的意思是使用类似
if (history.pushState) {...
}
这样的东西代替 Modernizr 不会考虑“quirks”？
为什么不直接把整个网站做好，并在加载时用 JavaScript 将 href 替换为哈希值？这样你仍然可以拥有漂亮的哈希值功能，还是我遗漏了什么？
这会如何影响分析？history.pushState 会计入单独的页面浏览量吗？
在 Firebug 的 Net 面板中，我注意到点击链接不会显示新的页面加载...
等等，你需要 JavaScript 来使用 HTML 5 History API，这怎么可能？难道不是这样解决不了问题吗？
如果你访问 http://www.danperceval.com，你会发现图片滑块（汽车）在主要内容区域工作。但是，如果你点击 ABOUT，它不工作，但 CSS 似乎是工作的。在 Chrome 和 Safari 中，图片滑块根本不工作，即使是在页面加载时也是如此。使用动态页面脚本加载内容似乎无法加载或与 jQuery 或任何脚本一起工作。另外，我是 CSS 新手，对脚本一无所知。请查看我的页面（www.danperceval.com）并看看你是否能找出为什么 jQuery 不起作用。谢谢。
我正在使用这个脚本，但它干扰了网站上很多其他随机的东西。例如，Shadowbox 和 Google Maps API 无法与它一起工作
$(window).bind(‘popstate’, function(){
_link = location.pathname.replace(/^.*[\\/]/, ”); //仅获取文件名
loadContent(_link);
});
另外，我在某些部分内链接时遇到了问题，因为文件名没有恢复到根目录。
我通常是渐进增强法的支持者，但 History API 的问题在于你可能无法正确平衡 IE8/IE9 用户数量和关闭 JS 的访客数量。如果你的网站上有相当数量的 IE8/IE9 用户，当你强迫他们在每次点击时都回发时，你实际上降低了他们的体验。（相当一部分移动用户仍然拥有没有 History API 的浏览器，如果你针对的是移动用户的话。）大多数/所有这些用户都可以在打开哈希值的情况下获得更好的体验。
最佳实践很棒，但对我来说，最终的最佳实践是为访问我页面的最多用户提供最佳体验。如果我能为 99% 的访客提供很棒的体验，而 1%（没有 JS 的顽固用户）得到错误屏幕，我愿意接受。这比为 80% 的访客提供很棒的体验，而为 20% 的访客提供一个有效但糟糕的体验要好得多。
（我也见过开发人员使用这种方法（例如 jQuery Mobile）陷入麻烦。为了支持完整页面的动态加载而进行 HTML 手术通常比加载和渲染片段，或者仅仅从一个页面中显示和隐藏内容更复杂、更容易出错）
如果特定页面有额外的 JavaScript 和/或额外的样式表，有没有办法一起加载它们？
var $myNav = $(“.myNav a”),
$mainContent = $(“.main-content”);
也许是我，但我认为这使它看起来更好，并且与 bootstrap 更好地配合。
稍微压缩了代码
如果你不想要完整的页面淡入，你可以直接删除该行。
玩得开心。
我还是 JS 新手，Chris Coyier 或者任何人，请发布作业答案，发布的内容都不正常工作。
提前感谢。
我发现，当触发动态内容替换的链接位于
<div id="guts">内时，它会中断。这在以前版本中似乎不是问题。不知道如何修复这个问题。任何建议都会受到赞赏。
这就是我完全停止使用它的原因。
根据你的网站，如果你正在使用动态包含（例如 ?page=Example），我能想到的唯一解决办法是在脚本中重新加载脚本，但这会导致讨厌的内存泄漏。
但如果你的链接直接指向文件（例如 \example.html），那么你可以修改这一行，如下所示：
修改为
因为你直接加载了 HTML 文件，所以不需要代码在整个页面中查找 .guts，不像 PHP 包含，它在 JS 访问之前将整个页面组合在一起。
你的解决方案非常 **简单**、**干净** 且 **清晰**。非常感谢！
当我本地在 Chrome 中预览时，它不起作用 :(
Safari 正常工作，但在 Chrome 中，‘guts’ 变为空并保持为空。
我做错什么了吗？
链接：http://stackoverflow.com/questions/23629244/popstate-html5-and-ajax-load-content
我们遇到了 popstate 事件的问题。我们使用这个新奇的专有技术制作了一个小型网站，我在制作一个带有 Ajax 响应的联系页面之前没有遇到任何问题。
我的 script.js（我删除了不必要的脚本和控制）和 HTML 代码。当尝试直接进入联系页面时，Ajax 调用没有问题。填写所有信息，点击提交按钮，Ajax 调用 PHP 脚本（在后台）发送电子邮件，不会改变页面。
问题开始于我尝试进入另一个页面，然后点击联系页面链接。现在，当我尝试点击提交按钮时，Ajax 调用没有触发，浏览器（Chrome 和 Firefox）直接调用操作表单中的 PHP 脚本，从而改变页面（不在后台）。我们有解决方案吗？非常感谢！
$(function () {
}); // 结束提交事件处理程序
});// 结束函数
我刚将其添加到我正在构建的网站中，除了一个问题之外，一切都正常工作。
在第一次加载索引页面时，我使用的滑块工作正常，但是当我再次点击索引页面的链接时，滑块脚本没有加载，所以我只看到了列表项，而没有看到滑块。
有什么想法吗？
这是页面的链接：http://www.level26.at/testsites/dj-yeezy/
我在几个项目中成功地使用了这个脚本。
现在我想在 Joomla!3 中使用它。
有没有办法将其改编到 Joomla？
我的网站在每个页面上使用不同的 JavaScript，因为内容需要这样做。如何将内容的脚本与内容一起加载？
...
我尝试过从索引中引用所有脚本，我尝试过在加载内容中引用脚本，我甚至尝试过通过创建具有 ID 的脚本变量并从内容 div 中进行替换来进行脚本替换。
任何帮助将不胜感激。