js -识别引用页面
smoothState.js - Identifying the referring page
当点击一个链接平滑状态加载新页面的内容时,我想用在新页面上可见的类来标识引用页面。有什么办法可以做到吗?
这不是最动态的解决方案,但我最终做的是将类设置为引用页面上的锚标记。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()等待动画完成,请确保将持续时间设置为动画所用的毫秒数。
相关文章:
- 引用对象中的通用值
- 如何在JavaScript中将字符串转换为函数引用
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何识别我的网站中的慢速设备
- 在动态创建的元素上获取对特定选择器的引用
- IIFE中的函数引用不可用
- 如何通过引用var Using DataTables来进行分页或排序
- 如何在创建键时引用来自同一对象的键
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- Datatables:通过DOM数据源中的名称引用列
- 自引用回调
- 引用类变量中的原型方法
- 无法获取属性'selectedIndex'的未定义引用或null引用
- AngularJS指令只识别双向绑定类型
- Vanilla JS通过引用移除数组元素
- 通过引用传递JavaScript对象
- js -识别引用页面
- 编译Windows语音识别宏时,规则引用错误无效
- 为什么对元素的引用未被识别
- Facebook分享对话框在发布自定义Open Graph故事时无法识别自定义引用对象