在modal（ajax）中加载新页面，同时使用pushState更改URI

Question

我正在尝试在弹出窗口/模态中加载新内容（登录/线程创建/线程视图/快速搜索），但也使用pushState更改URI。

现在，我有一般的概念，但我对确切的机制略有困惑。

我在浏览网站时遇到了www.usatoday.com/news。我做了一些研究，看起来他们使用pushState来改变URI并通过AJAX在模态窗口中加载内容。

我的问题具体涉及如何在模态窗口中拉动和显示“新页面”。很明显，您需要有一个新的控制器来显示正确的URI并使其可共享/可爬行。但是可以将该页面直接显示在模态中吗？或者你必须在一个全新的ajax驱动的模型/视图中干净信息吗？

Answer 1

你正在使用什么模式？例如，如果您使用的是fancybox。你只需给你的页面一个锚点链接另一类fancybox，页面就会以模态打开，所有的ajax都会为你处理。然后，您可以在fancybox的aftershow回调函数中添加pushstate的代码。

还有一个后关闭回调，您可以在其中弹出或推送新状态以将uri恢复为原始状态。

你如何处理从外部进入uri的人取决于你。但是你已经将页面构建为一个独立的链接，那么它应该不是问题。如果你想在fancybox中打开它，你必须在doc上为该页面准备好fancybox。

你也说过很明显你必须有一个新的控制器。这根本不是真的，事实上我根本就没有单独的控制器，如果我是你，我会在constants.php中定义一个常量：

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

然后您可以像以下一样进行检查：

if (!IS_AJAX){
    //here is code for non ajax page load, e.g load headers, footers etc that you dont need in ajax requests etc.
}else{
    //often dont need this but if you have code specifically for ajax call put it here
}

}