SmoothState.Js页面更改后重新初始化页面脚本

Z时代
2024-01-10
分类：问答

我正在使用SmoothState.js进行页面转换，它可以正常工作并使用ajax加载新页面。但是，我在每个页面上都有JS脚本需要重新初始化，而且我无法使它们始终出现在页面转换中。

smoothState.js提供了onAfter回调函数，该函数可让您重新运行插件。如果您不熟悉AJAX的工作原理，这可能会很棘手。
当您在$（document）.ready（）上运行插件时，它将仅在页面上当前的元素上注册。由于我们在每次加载时都注入新元素，因此我们需要再次运行插件，将其作用域仅限于新事物。
做到这一点的一种好方法是将您的插件初始化包装在我们同时调用$
.fn.ready（）和onAfter的函数中。每次初始化插件时，您都需要指定上下文，以免对它们进行双重绑定。这称为“模块执行控制器”。

我的计划是从JS文件中获取函数，并将它们全部放入SmoothState.js文件内的onAfter调用中。这样，每次用户更改页面时，功能将始终可用。

这里是我现在的代码结构。我已经做了很多挖掘工作，但是我陷入了困境。您能帮我弄清楚我做错了什么吗？谢谢你的时间！

$(document).ready(function() {
    mail();
});
$('#main').smoothState({
    onAfter: function() {
        mail();
    }
});
function mail() {
    // script from mail.js goes here
}
$(function() {
    $('#main').smoothState();
});
$(function() {
    "use strict";
    var options = {
            prefetch: true,
            pageCacheSize: 3,
            onStart: {
                duration: 250, // Duration of our animation 
                render: function($container) {
                    // Add your CSS animation reversing class
                    $container.addClass("is-exiting");
                    // Restart your animation 
                    smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class 
                    $container.removeClass("is-exiting");
                    // Inject the new content 
                    $container.html($newContent);
                }
            },
        },
        smoothState = $("#main").smoothState(options).data("smoothState");
});

回答：

通过将onAfter脚本移至主要的smoothstate函数（删除了其他smoothstate函数），我设法在代码的末尾运行了一个单独的函数。在刷新浏览器的情况下，也可以在准备好的文档上运行函数。如果它与您的代码相同，则如下所示：

$(document).ready(function() {
        mail();
    });
    function mail() {
        // script from mail.js goes here
    }
    $(function() {
        "use strict";
        var options = {
                prefetch: true,
                pageCacheSize: 3,
                onStart: {
                    duration: 250, // Duration of our animation 
                    render: function($container) {
                        // Add your CSS animation reversing class
                        $container.addClass("is-exiting");
                        // Restart your animation 
                        smoothState.restartCSSAnimations();
                    }
                },
                onReady: {
                    duration: 0,
                    render: function($container, $newContent) {
                        // Remove your CSS animation reversing class 
                        $container.removeClass("is-exiting");
                        // Inject the new content 
                        $container.html($newContent);
                    }
                },
                onAfter: function() {
                    mail();
                }
            },
            smoothState = $("#main").smoothState(options).data("smoothState");
    });