时间戳

首页 > 解决方案 > Turbolinks 禁止为背景图像添加 Javascript 附加类

javascript - Turbolinks 禁止为背景图像添加 Javascript 附加类

问题描述

我正在将前端 html 主题与 Laravel 应用程序集成，并且遇到了 turbolinks 不允许 Javascript 附加 div 类的问题。这导致背景图像仅在刷新时显示。

<div class="intro-banner" data-background-image="/storage/images/hero.jpg">
    <div class="container">

自定义.js

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/
function inlineBG() {

    // Common Inline CSS
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

} inlineBG();

// Fix for intro banner with label
$(".intro-search-field").each(function() {
    var bannerLabel = $(this).children("label").length;
    if ( bannerLabel > 0 ){
        $(this).addClass("with-label");
    }
});

// Photo Boxes
$(".photo-box, .photo-section, .video-container").each(function() {
    var photoBox = $(this);
    var photoBoxBG = $(this).attr('data-background-image');

    if(photoBox !== undefined) {
        $(this).css('background-image', 'url('+photoBoxBG+')');
    }
});

标签： javascriptcsslaravelturbolinks

解决方案

看起来这段代码只运行一次：在初始页面加载时。为了让它适用于每个页面加载，您需要在turbolinks:load. 由于脚本还会将元素附加到页面，因此您需要小心不要以不必要的重复元素结束。Turbolinks 在访问者离开之前以最终状态存储页面的副本。此缓存副本将包括任何附加的 HTML。因此，请确保您的代码在附加之前检查附加元素的存在，或者在缓存之前删除这些元素。

以下采用后一种方法，通过删除 上的元素turbolinks:before-cache：

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/

$(document).on('turbolinks:load', function () {
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

    // Fix for intro banner with label
    $(".intro-search-field").addClass(function () {
        if ($(this).children("label").length) return "with-label";
    });

    // Photo Boxes
    $(".photo-box, .photo-section, .video-container").css('background-image', function () {
        return 'url('+$(this).attr('data-background-image')+')'
    })
});

$(document).on('turbolinks:before-cache', function () {
    $(".single-page-header, .intro-banner").each(function() {
        $(this).children(".background-image-container").remove();
    });
});

我还整理了一些 jQuery 代码。许多 jQuery 函数接受函数作为参数，这在一定程度上简化了事情，并且不需要使用each.

最后，包装大量代码片段$(document).on('turbolinks:load', function () {…}并不是很好的做法，因为它会创建对 Turbolinks 的依赖，如果您决定转移到其他内容，则必须更新每个调用它的地方。如果您喜欢冒险，您可能想要创建一个像我在这里创建的那样的迷你框架：https ://stackoverflow.com/a/44057187/783009

推荐阅读