js -识别引用页面

smoothState.js - Identifying the referring page

本文关键字：引用 识别 js      更新时间：2023-09-26

当点击一个链接平滑状态加载新页面的内容时，我想用在新页面上可见的类来标识引用页面。有什么办法可以做到吗?

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

相关文章：