Question

我有一个网站，用户可以使用向导生成自己的Codeigniter网站，用户将提供模块，字段和功能详细信息。根据用户输入，我的网站将生成并部署一个网站，并在下载之前向用户显示演示。一切正常。

现在我计划允许用户在预览时为生成的网站选择不同的样式/主题。如何让用户在不重新加载整个页面的情况下立即查看更改？

我尝试使用所选样式替换生成的网站上的样式表文件，并重定向到生成的网站上的另一个页面。但是使用相同的样式表文件，因为它已经被浏览器缓存。所以请给我一些选择。如果可以在不重定向用户的情况下完成，那将是我的最佳选择。

Answer 1

为防止缓存问题，样式表需要具有不同的名称。以下是使用jQuery实现它的示例：http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

<强> Demo

Answer 2

将一个变量传递给视图，该变量是否包含样式表文件名的值？至于当用户在同一页面时更改样式文件...请参阅此问题：Is there an easy way to reload css without reloading the page?

<?php
$data['stylesheet_name'] = 'user1';

$this->load->view('viewname', $data);

/**
 * View File
 **/

<link rel="stylesheet" type="text/css" href="/css/user/<?= $stylesheet_name; ?>.css" />

Answer 3

我使用了以下代码，无需更改样式表文件名即可正常使用。

function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

这会强制浏览器重新加载文件，因为参数因时间变化而发生变化。

Answer 4

这对我来说可以替换单个样式表。样式表被命名为“themegray”，“themeblue”，“themegreen”等。“t”代表新颜色，例如“blue”。

function flipTheme(t) {
    $('link[rel="stylesheet"]').each(function () {
        if (this.href.indexOf(theme)>=0) {
            this.href = this.href.replace(theme, t);
            theme = t;
        }
    });
}

如何动态更改正在查看的网站的CSS样式表？

4 个答案: