在十月CMS中仅包含一次脚本/样式

问题描述

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

是否可以设置一项功能，以便仅将脚本放置一次？

我面临的一个典型用例是一个滑动条，我只想在显示页面中实际使用它时才加载其脚本和样式，但是如果我有多个滑动条，那么我不想包含多个脚本时间。

解决方法

有两种解决方案，您可以使用其中任何一种，非常适合您。

1。您可以给脚本unique id来检查脚本是否已经存在，并基于脚本的包含性

我们制作2个脚本

1. 检查脚本将检查是否添加了主脚本（如果未添加） 已添加，或者如果已存在，则跳过添加。
2. 您的主脚本

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。更好的解决方案是从组件文件中添加脚本，然后在其中检查

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;
    }
}

如有疑问，请发表评论。