動態URL與jQuery pushState和共享頁眉/頁腳

我正在一個小網站努力，並試圖使用jQuery + AJAX動態加載信息。截至目前，我有一個主頁〜/ home和個人資料頁〜/個人資料。這兩頁共享相同的頁眉和頁腳，我首先加載頁眉，然後加載頁面，然後加載頁腳。當我切換頁面時，我只是用另一個html替換頁面div。然而，這裏的問題是，如果你導航到〜/ profile並加載它只是加載頁面div內容的HTML頁面。動態URL與jQuery pushState和共享頁眉/頁腳

基本上我想知道如果任何人有一個系統上的好建議，能夠導航到任何鏈接，並讓瀏覽器知道加載單獨的頁眉和頁腳文件，而不是硬編碼到每個文件。我認爲它會涉及某種PHP /框架，但是我只使用過CodeIgniter，而且我對此沒有經驗。

這從這裏片斷看起來前途無量：CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

if (!$this->input->is_ajax_request()) 
    $this->load->view('header'); 

$this->load->view('your_view', $data); 

if (!$this->input->is_ajax_request()) 
    $this->load->view('footer');

我唯一的問題將如何有一個控制器設置攔截我在頁眉和頁腳域和負載的任何鏈接，與頭文件有鏈接的js文件知道哪個頁面通過ajax加載到中間。

來源

2012-06-14 user1455278

這個問題不是你想象的那麼簡單。這不僅僅是頁眉和頁腳，你也有類型改變。您必須發送帶有text/html的html消息，以及帶有text/plain內容類型標頭的ajax消息。你需要2個皮膚/骨架：一個用於html，一個用於ajax調用。你需要一個皮膚提供者能夠決定在當前情況下使用哪個皮膚。您必須獨立於皮膚呈現內容，或者皮膚必須調用內容上的呈現方法。

它看起來非常，非常大致是這樣的：

class Controller 
{ 
    public function __construct() 
    { 
     $provider = new SkinProvider(); 
     $this->skin = $provider->getSkin(); 
    } 

    public function action() 
    { 
     $this->skin->render(new Content()); 
    } 
} 

class SkinProvider 
{ 
    public function getSkin() 
    { 
     if ($this->input->is_ajax_request()) 
      return new AjaxSkin(); 
     else 
      return new HtmlSkin(); 
    } 
} 

class AjaxSkin extends AbstractSkin 
{ 
    public function render($content) 
    { 
     $this->contentType('text/plain'); 
     $content->render(); 
    } 
} 

class HtmlSkin extends AbstractSkin 
{ 
    public function render($content) 
    { 
     $this->contentType('text/html'); 
     $this->load->view('header'); 
     $content->render(); 
     $this->load->view('footer'); 
    } 
} 

class Content extends AbstractView 
{ 
    public function render() 
    { 
     $data = $this->model->ask(); 
     $this->load->view('your_view', $data); 
    } 
}

你可以把控制器構造成和抽象的控制器，你將不得不在每一個你從擴展控制器實際的皮膚。

來源

2013-04-20 03:19:36 inf3rno

動態URL與jQuery pushState和共享頁眉/頁腳

回答

相關問題