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（）等待动画完成，请确保将动画持续时间设置为毫秒。