动态加载 CSS 和 JS 文件

Question

大家好。

我有一些关于动态加载 CSS 和 JS 文件的问题。

我知道有很多这样的问题。但我关心的是：

我应该使用后端程序来加载 CSS 和 JS 吗？

例子：

if($page == "abc.com") {
    echo "<link href='abc.css' />";
else if($page == "def.com") {
    echo "<link href='def.css' />";
else {
    echo "<link href='ghi.css' />";
}

在特定页面中使用函数加载特定的 CSS，但它在

部分中声明。

Dynamically Add CSS and JS File - CodeIgniter

abc.com 内部

add_css(array('metro-admin.css', 'abc.css'));  
echo put_headers();

源代码如下所示。

Answer 1

好的，我有一个解决方案，不是在 PHP 中显式声明 css，而是让 PHP 回显一个 <script> 标记，以便 PHP 在前端不会过多地侵入。

if($page == "abc.com") {
    echo "<script src='abc.js'></script>";
else if($page == "def.com") {
    echo "<script src='def.js'></script>";
else {
    echo "<script src='ghi.js'></script>";
}

好的，PHP 方面已经完成，现在我们将在各个脚本文件中破解脚本执行。

--== ABC.JS ===--

  var includeFiles = [ 
    'abc'
  ];

    for (var i = 0; i < includeFiles.length; i++) {
        $('head').append("<link rel='stylesheet' href=' +includeFiles[i]+ ".css'>");
    }

当然，您会为每个文件应用大约相同的代码，这可能会在 DRY 上崩溃，但由于此脚本仅在 PHP 明确回显时才会执行，因此不会重复，所以双方都有争论。

为什么要使用数组？ 可移植性，如果您想在每个页面添加多个 CSS 文件，只需简单地将 CSS 文件名添加到数组中，循环就会相应地处理它。 p>