Заставить браузер использовать новый CSS

StackOverflow https://stackoverflow.com/questions/101125

  •  01-07-2019
  •  | 
  •  

Вопрос

Есть ли способ проверить, есть ли у пользователя другая версия CSS, кэшированная его браузером, и если да, то заставить браузер загрузить новую версию?

Это было полезно?

Решение

Я не знаю, правильно ли это используется, но я думаю, что вы можете принудительно перезагрузить файл CSS, используя строку запроса:

<link href="mystyle.css?SOME_UNIQUE_TEXT" type="text/css" rel="stylesheet" />

Я помню, что использовал этот метод много лет назад, чтобы принудительно перезагрузить изображение с веб-камеры, но время, вероятно, пошло дальше...

Другие советы

Без использования js вы можете просто сохранить имя файла CSS в переменной сеанса.Когда делается запрос на главную страницу, вы просто составляете тег ссылки CSS с именем переменной сеанса.

Поскольку имя файла ccs отличается, вы заставляете браузер загружать его без необходимости проверять, что было ранее загружено в браузер.

Как Йерун предложил вы можете иметь что-то вроде:

<link href="StyleSelector.aspx?foo=bar&baz=foz" type="text/css" rel="stylesheet" />

Тогда ваш файл StyleSelector.aspx должен выглядеть примерно так:

<%@ Page Language="cs" AutoEventWireup="false" Inherits="Demo.StyleSelector" Codebehind="StyleSelector.aspx.cs" %>

И ваш StyleSelector.aspx.cs выглядит так:

using System.IO;

namespace Demo
{
    public partial class StyleSelector : System.Web.UI.Page
    {
        public StyleSelector()
        {
            Me.Load += New EventHandler(doLoad);
        }

        protected void doLoad(object sender, System.EventArgs e)
        {
            // Make sure you add this line
            Response.ContentType = "text/css";

            string cssFileName = Request.QueryString("foo");

            // I'm assuming you have your CSS in a css/ folder
            Response.WriteFile("css/" + cssFileName + ".css");
        }
    }
}

Это отправит пользователю содержимое файла CSS (фактически любого файла, см. примечание по безопасности) на основе аргументов строки запроса.Теперь самое сложное — выполнить условный GET — причудливое название для проверки того, есть ли у пользователя страница в кеше или нет.

Прежде всего, я настоятельно рекомендую вам прочитать HTTP Conditional GET для хакеров RSS, отличная статья, объясняющая основы механизма HTTP Conditional GET.Это должен прочитать, Поверьте мне.

Я опубликовал аналогичный ответ (но с PHP-кодом, извините) на вопрос SO могу ли я использовать «заголовок http», чтобы проверить, была ли изменена динамическая страница.Должно быть легко перенести код с PHP на C# (я сделаю это, если позже у меня будет время).

Примечание по безопасности:крайне небезопасно делать что-то вроде ("css/" + cssFileName + ".css"), поскольку вы можете отправить строку относительного пути и, таким образом, отправить пользователю содержимое другого файла.Вы должны придумать лучший способ узнать, какой CSS-файл отправлять.

Примечание к дизайну:вместо страницы .aspx вы можете использовать IHttpModule или IHttpHandler, но этот способ работает отлично.

Ответ на вопрос 1

Вы могли бы написать Управление сервером наследующий от System.Web.UI.Control, переопределяющий Оказывать метод:

public class CSSLink : System.Web.UI.Control
{

    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {

        if ( ... querystring params == ... )
            writer.WriteLine("<link href=\"/styles/css1.css\" type=\"text/css\" rel=\"stylesheet\" />")
        else
            writer.WriteLine("<link href=\"/styles/css2.css\" type=\"text/css\" rel=\"stylesheet\" />")

    }

}

и вставьте экземпляр этого класса в свою MasterPage:

<%@ Register TagPrefix="mycontrols" Namespace="MyNamespace" Assembly="MyAssembly" %>
...
<head runat="server">
    ...
    <mycontrols:CSSLink id="masterCSSLink" runat="server" />
</head>
...

Возможно, вам следует просто поделиться общим классом-предком, а затем, если это необходимо, вы можете щелкнуть его с помощью одной команды js.

<body class="style2">

<body class="style1">

и т. д.

Мне нравится предложение Джерона добавить строку запроса к URL-адресу таблицы стилей.Вы можете добавить отметку времени последнего изменения файла таблицы стилей.Мне кажется, это хороший кандидат на роль вспомогательной функции или пользовательского элемента управления, который будет генерировать для вас тег LINK.

Я знаю, что вопрос был конкретно о C#, и я предполагаю, что это какой-то Windows Server.Поскольку я плохо знаю ни одну из этих технологий, я дам ответ, который будет работать в PHP и Apache, и вы, возможно, что-то из этого получите.

Как предлагалось ранее, просто установите идентификатор или класс в теле страницы в зависимости от конкретного запроса, например (в PHP).

<?php
if($_GET['admin_page']) {
  $body_id = 'admin';
} else {
  $body_id = 'normal';
}
?>
...
<body id="<?php echo $body_id; ?>">
...
</body>

И ваш CSS может быть нацелен на это:

body#admin h1 {
   color: red;
}

body#normal h1 {
   color: blue;
}

и т. д.

Что касается принудительной загрузки CSS, вы можете сделать это в Apache с помощью модулей mod_expires или mod_headers — для mod_headers это в .htaccess остановит кэширование CSS-файлов:

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

Но поскольку вы, вероятно, не используете Apache, это вам не сильно поможет :(

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top