javascript - smoothState.js - 识别引用页面

Question

当单击链接 smoothstate 加载新页面的内容时，我想用新页面上可见的类来标识引用页面。有什么办法可以做到这一点吗？

Answer 1

这不是最动态的解决方案，但我最终所做的是将类设置为引用页面上的 anchor 标记。 SmoothState 有 onBefore() 回调，它传递 $currentTarget，即您单击以开始转换的 anchor 元素。您可以轻松地从 anchor 元素读取 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() 等到动画完成，请确保将持续时间设置为动画所需的毫秒数。