كيف يمكنني أن أجعل المتصفح يرى تغييرات CSS وJavascript؟

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

  •  08-06-2019
  •  | 
  •  

سؤال

لا تتغير ملفات CSS وJavascript كثيرًا، لذا أريد أن يتم تخزينها مؤقتًا بواسطة متصفح الويب.ولكني أريد أيضًا أن يرى متصفح الويب التغييرات التي تم إجراؤها على هذه الملفات دون مطالبة المستخدم بمسح ذاكرة التخزين المؤقت للمتصفح.تريد أيضًا حلاً يعمل بشكل جيد مع نظام التحكم في الإصدار مثل Subversion.


تتضمن بعض الحلول التي رأيتها إضافة رقم إصدار إلى نهاية الملف في شكل سلسلة استعلام.

يمكن استخدام رقم مراجعة SVN لأتمتة هذا نيابةً عنك: ASP.NET عرض رقم مراجعة SVN

هل يمكنك تحديد كيفية تضمين مراجعة متغير ملف آخر؟في ملف HTML يمكنني تضمين رقم المراجعة في عنوان URL لملف CSS أو Javascript.

في ال كتاب التخريب يقول عن المراجعة:"تصف هذه الكلمة الأساسية آخر مراجعة معروفة تم فيها تغيير هذا الملف في المستودع".

يسمح Firefox أيضًا بالضغط كنترول+ر لإعادة تحميل كل شيء على صفحة معينة.

للتوضيح، أنا أبحث عن حلول لا تتطلب من المستخدم القيام بأي شيء من جانبه.

هل كانت مفيدة؟

المحلول

لقد وجدت أنه إذا قمت بإلحاق الطابع الزمني الأخير للملف بنهاية عنوان URL، فسيطلب المتصفح الملفات عند تعديله.على سبيل المثال في PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

نصائح أخرى

تتضمن بعض الحلول التي رأيتها إضافة رقم إصدار إلى نهاية الملف في شكل سلسلة استعلام.

<script type="text/javascript" src="funkycode.js?v1">

يمكنك استخدام رقم مراجعة SVN لأتمتة هذا لك من خلال تضمين الكلمة LastChangedRevision في ملف html الخاص بك بعد ظهور v1 أعلاه.يجب عليك أيضًا إعداد المستودع الخاص بك للقيام بذلك.

آمل أن يوضح هذا إجابتي أكثر؟

يسمح Firefox أيضًا بالضغط كنترول + ر لإعادة تحميل كل شيء على صفحة معينة.

في رأيي، من الأفضل جعل رقم الإصدار جزءًا من الملف نفسه، على سبيل المثال: myscript.1.2.3.js.يمكنك ضبط خادم الويب الخاص بك على تخزين هذا الملف مؤقتًا إلى الأبد، وإضافة ملف js جديد فقط عندما يكون لديك إصدار جديد.

عندما تقوم بإصدار إصدار جديد من مكتبات CSS أو JS، يتسبب في حدوث ما يلي:

  1. تعديل اسم الملف ليشمل سلسلة إصدار فريدة
  2. قم بتعديل ملفات HTML التي تشير إلى المكتبة للإشارة إلى الملف الذي تم إصداره

(عادةً ما تكون هذه مسألة بسيطة جدًا بالنسبة لبرنامج نصي للإصدار)

يمكنك الآن ضبط مدة انتهاء الصلاحية لـ CSS/JS لتكون سنوات في المستقبل.كلما قمت بتغيير المحتوى، إذا كان HTML المرجعي يشير إلى عنوان URI جديد، فلن تستخدم المتصفحات النسخة القديمة المخزنة مؤقتًا بعد الآن.

يؤدي هذا إلى سلوك التخزين المؤقت الذي تريده دون الحاجة إلى أي شيء من المستخدم.

كنت أتساءل أيضًا عن كيفية القيام بذلك، عندما وجدت إجابة جروم.شكرا على الكود.

لقد واجهت صعوبة في فهم كيفية استخدام الكود.(لا أستخدم نظامًا للتحكم في الإصدار.) باختصار، يمكنك تضمين الطابع الزمني (ts) عند استدعاء ورقة الأنماط.أنت لا تخطط لتغيير ورقة الأنماط كثيرًا:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top