在 OctoberCMS 中仅包含一次 scripts/styles

Question

OctoberCMS 有一个非常方便的功能，允许在页面或部分中使用 {% put scripts %} 注入脚本或样式。我面临的问题是，每次我包含一个包含这个的部分时，它都会复制添加的脚本。

是否有可以设置为只放置一次脚本的功能？

我面临的一个典型用例是一个滑块部分，我只想在它实际用于显示页面时加载它的脚本和样式，但如果我有多个滑块，那么我不想包括脚本多次。

Answer 1

有两种解决方案，您可以使用任何一种，最适合您。

1. you can give your script unique id to check if its already exist or not and based on that include it

我们制作了 2 个脚本

check-script 将检查是否添加了主脚本，如果没有添加添加它，或者如果已经存在则跳过添加。
你的主脚本

check-script.js

window.scriptIncluded = document.getElementById('script-included');

// check if script is already loaded if not include it
if(!window.scriptIncluded) {

    scriptTag = document.createElement('script');
    scriptTag.id = 'script-included'; // <- USE YOUR ID HERE ITS JUST FOR DEMO
    scriptTag.src = '/plugins/.../assets/bundle.js';

    // add script first time
    document.head.append(scriptTag);
}

现在在您的 {% put scripts %} 中只包含此脚本

{% put scripts %}
    <script type="text/javascript" src="/plugin/.../js/check-script.js"></script>
{% endput %}

是的 check-script.js 可能包含多次但是，它只会加载您的主脚本一次。

2. better solution would be to add script from your component file and check there

public function onRun()
{    
    // if global variable is not set only then include script
    if(!isset($GLOBALS['script-included'])) { // <- USE YOUR ID HERE ITS JUST FOR DEMO

        $this->addJs('/plugins/.../assets/main-script.js');

        // set global variable so next time script will not be included
        $GLOBALS['script-included'] = true;
    }
}

如有疑问请评论。

在 OctoberCMS 中仅包含一次 scripts/styles

Include scripts/styles only once in OctoberCMS

octobercms