Question

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

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

custom.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+')');
    }
});

Answer 1

该代码似乎只运行一次：在初始页面加载时。要使它在每次页面加载时都有效，您需要在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遍历jquery选择。

最后，在$(document).on('turbolinks:load', function () {…}中包装大量代码片段并不是一个好习惯，因为这会导致对Turbolinks的依赖，并且，如果您决定移至其他内容，则必须在每个被调用的地方进行更新。如果您喜欢冒险，可以创建一个微型框架，例如我在这里创建的框架：https://stackoverflow.com/a/44057187/783009

Turbolink禁止将Javascript附加类用作背景图像

1 个答案: