smoothState.js - 識別引用頁面

Question

當點擊一個鏈接smoothstate加載新頁面的內容時，我想識別具有在新頁面上可見的類的引用頁面。有沒有辦法做到這一點？

Answer 1

這不是最動態的解決方案，但我最終做的是將類設置爲引用頁上的定位標記。 SmoothState具有onBefore（）回調函數，它傳遞$ currentTarget，即您單擊的錨點元素來啓動轉換。您可以輕鬆地從錨點元素中讀取href，並檢測您想要以何種方式執行此操作（或將其存儲在某個位置，直到稍後再執行）。

在我的HTML

所以，我可以宣佈一個鏈接，像這樣：

<a href="new_page.html" class="special_case">New Page</a> 

然後當我設置了smoothState，我宣佈我的onBefore（）回調：

onBefore: function($currentTarget, $container) { 
    if ($currentTarget.is(".special_case")) { 
    // Some logic here 
    globalSpecialCase = true; 
    } 
} 

由於smoothState實際上讓你保持在同一個地方，只需要一個Ajax調用來請求新的頁面HTML，然後將頁面內容，當前的Javascript環境，全局變量以及所有內容都替換掉。所以我建立了一個全局標誌（或者你可以創建任何你想要的數據結構），並且在特殊鏈接的情況下設置標誌。

在新的頁面加載時，smoothState運行onReady（），它表示已獲取新的頁面內容並準備好替換它並運行介紹動畫。你可以在頁面開始渲染之前檢查你的標誌來做事情，或者你可以等到onAfter（）回調發生，這意味着頁面已經完全加載並且所有的轉換動畫已經運行。此時，我檢查標誌，運行一些邏輯並取消設置，以確保我準備好稍後再點擊一個新鏈接。

onReady: { 
    duration: 0, 
    render: function($container, $newContent) { 
    if (globalSpecialCase) { 
     // Logic because this page was loaded from a special link 
     globalSpecialCase = false; 
    } 

    // Inject the new content 
    $container.html($newContent); 
    } 
} 

有一點需要注意：幾乎所有的smoothState例子有onReady持續時間設置爲0，這意味着onAfter（）回調將立即發生以下onReady（），不管你的動畫多久。如果您真的想讓onAfter（）等待動畫完成，請確保將動畫持續時間設置爲毫秒。