在模式(ajax)中加载新页面,同时使用pushState更改URI


load new page in modal(ajax), while using pushState to change URI

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

现在,我有了大致的概念,但对确切的机制有点困惑。

我正在浏览网站,发现www.usatoday.com/news。我做了一些研究,似乎他们使用pushState来改变URI,并通过AJAX在模态窗口加载内容。

我的问题特别涉及如何在模态窗口内拉和显示"新页面"。很明显,您需要一个新的控制器来显示正确的URI,并使其可共享/可抓取。但是有可能把那个页面直接显示在模态中吗?还是必须在全新的ajax驱动模型/视图中添加信息?

你使用什么模态?例如,如果你正在使用fanybox。你只需要给锚链接到你的页面一个额外的类fancybox和页面在一个模式中打开,所有的ajax都为你处理。然后,您可以在fancybox的aftershow回调函数中添加pushstate代码。

还有一个after close回调,其中您将弹出或推送一个新状态以将uri恢复到原始状态。

如何处理外部输入uri的人取决于您。但如果你已经建立了页面作为一个独立的链接,那么它不应该是一个问题。如果你想在fancybox中打开它,那么你必须在文档中初始化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
}

}