0

我试图在使用 swup.js 时重新加载一些 javascript，这是一个页面转换脚本。我对javascript很陌生。

Swup 的文档说要创建这样的函数

function init() {
    if (document.querySelector('#carousel')) {
        // something like new Carousel('#carousel')
    }
    
    if (document.querySelector('#lightbox')) {
        // something like $('#lightbox').lightbox()
    }
    
    if (document.querySelector('#something-else')) {
        // ...
    }
}

然后在启动 swup 时运行它

const swup = new Swup();

// run once 
init();

// this event runs for every page view after initial load
swup.on('contentReplaced', init);

我认为像这样破坏js，以便以后重新加载

function unload() {
    if (document.querySelector('#carousel')) {
        // carousel.destroy()
    }
    // ...
}

swup.on('willReplaceContent', unload);

我联系了我需要重新启动的脚本的作者，他指出以下内容：

“当一个页面被初始化时，在加载了所有的 JavaScript 库代码之后，下面的客户端代码被执行：”

jQuery(document).ready(function($) {
    var demoMode = false;
    if ($('#eform-live-demo-mode-token').length) {
        demoMode = true;
    }
    $('.ipt_fsqm_form').iptFSQMForm({
        demoMode: demoMode,
    });
});

“所以你必须至少确保 jQuery.fn.iptFSQMForm 是一个有效的函数并像运行它一样”

jQuery('.ipt_fsqm_form').iptFSQMForm({
    demoMode: false,
});

页面第一次加载时，javascript 会按预期执行，并且页面上的应用程序使用该 javascript 函数。但是在离开页面然后返回页面后，应用程序无法加载。

我在页脚底部有这段代码，它没有做任何事情来帮助重新加载所需的 javascript。

<script>

function initswupjs() {
    if (document.querySelector('#ipt_fsqm_form')) {
        jQuery('.ipt_fsqm_form').iptFSQMForm({
            demoMode: false,
        });
    }    
}

function unloadswupjs(){
    if (document.querySelector('#ipt_fsqm_form')){
        iptFSQMForm.destroy()
    }
}


    const swup = new Swup({
        plugins: [new SwupSlideTheme()]
    });

    initswupjs();

    swup.on('contentReplaced', initswupjs);

    swup.on('willReplaceContent', unload);

感谢任何指针。谢谢！

4

0 回答 0