พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

เทคนิคนี้ก็ตามชื่อเลยนะครับผม มันเป็นการใส่เวอร์ชั่นให้ CSS เพื่อให้บราวเซอร์เข้าใจว่ามันไม่ใช่ CSS ตัวเดิมที่เคยเก็บไว้ครับ สำหรับวิธีการทำก็ง่าย ๆ เรามาดูโค้ดกันเลยนะครับ

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน <head> ของเราเป็นแบบนี้นะครับ:

[html]<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />[/html]

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

[html]<link … href="css/style.css?v=1001" />[/html]

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

แค่นี้ทุกครั้งที่เราอัพเดท CSS คนเข้าก็จะเห็น CSS ใหม่แล้วครับ โดยสิ่งที่เราต้องทำก็แค่แก้เลขเวอร์ชั่นจุดเดียวเท่านั้นเอง

เทคนิคนี้หลายคนอาจทราบกันแล้ว แต่เชื่อว่าส่วนใหญ่น่าจะยังไม่รู้กันครับ ถ้าชอบไม่ชอบยังไงก็มาบอกกันได้ครับผม หรือใครมีเทคนิคอะไรเจ๋ง ๆ ก็แนะนำมาได้เลยครับ ขอบคุณมากครับ

แท็กยอดนิยม

PHP1112

PHP: Hypertext Preprocessor คือภาษาคอมพิวเตอร์สำหรับพัฒ...

Python859

ภาษาโปรแกรมคอมพิวเตอร์ระดับสูง รองรับการพัฒนาโปรแกรมหลา...

HTML728

HyperText Markup Language คือ ภาษาสำหรับสร้างหน้าเว็บไซ...

SQL473

SQL ย่อมาจาก Structured Query Language คือ ภาษาที่ใช้สำ...

JavaScript385

JavaScript ตัวย่อคือ JS เป็นภาษาที่เป็นส่วนประกอบที่สำค...

เพิ่มเติม

อันนี้มัน Refresh ทั้งหน้าครับผม ต่างกันครับแต่ที่ จขกท. อยากได้นั้นให้มัน Refresh เฉพาะบ้างจุดเท่านั้นเช่นตัวอย่าง comment facebook อ่ะครับจะ Refresh เฉพาะที่ comment ครับผม

บันทึกการเข้า

รับทำเว็บไซต์ เขียนระบบต่างๆตามที่ต้องการ (ยกเว้น 18+ กับการพนัน) ระบบมีปัญหาการใช้งานแจ้งพจได้เลยนะครับอย่าได้เกรงใจเพราะเดี๋ยวมันจะไม่รู้ปัญหา ออกแบบเว็บไซต์

| รับทำเว็บไซต์

navico

Verified Seller หัวหน้าแก๊งเสียว

พลังน้ำใจ: 108

ออฟไลน์

กระทู้: 2,315

ตั้งเวลาให้ฟังก์ชั่น จาวาสคริปต์ทำงานเป็นรอบๆ อาจจะ ทุกๆ 5-10 วินาที เหมือนพวก ajax chat อะไรประมาณนั้นจะได้ไหมเน๊าะ setTimeOut(function,time); //JS

ไม่คุ้มกับ BW ครับ

เปลืองแบนวิดอย่างไรครับ ขยายความหน่อย

ผมไม่ได้รีเฟรชทั้งหน้านะ แค่ให้ JS ส่งรีเควสไปดึงข้อมูลอัพเดตมาอ่ะครับ ผมกลับไปกังวลเรื่อง Process มากว่า แบนวิด นะเนี่ย....

« แก้ไขครั้งสุดท้าย: 04 กันยายน 2010, 14:24:57 โดย navico »

บันทึกการเข้า

kitazawa1st

สมุนแก๊งเสียว

พลังน้ำใจ: 29

ออฟไลน์

กระทู้: 563

ไม่คุ้มกับ BW ครับ

เปลี่ยนแบนวิดอย่างไรครับ ขยายความหน่อย

ครับ

บันทึกการเข้า

เล็กสั้น ขยันซอย

kinkow

สมุนแก๊งเสียว

พลังน้ำใจ: 53

ออฟไลน์

กระทู้: 704

อันนี้พอได้เปล่าครับนั่งทำให้เมื่อกี้ ลองเอาไปใช้งานดูนะครับ ผมใช้ jquery เอานะครับ สร้าง 3 ไฟล์ ดังนี้ test.php << เป็นไฟล์ที่แสดงข้อมูล time.php << แสดงข้อมูลที่ jquery ไปดึงมาแสดงตามระยะเวลาที่กำหนดไว้ครับ jquery.js << อันนี้หาดาวน์โหลดในเว็บไซต์ของ jquery ได้เลยครับ

กำหนดเวลาได้ที่คำสั่ง setTimeout("getRefresh();", 1000); นะครับ ตัวเลข 1000=1วินาที ปรับตรงนี้ได้เลยอยากได้กี่นาทีก็คูณเข้าไปนะครับ ไฟล์ test.php

auto").show("slow");

$("

autoRefresh").load("time.php", '', callback);

}

function callback() { $("

autoRefresh").fadeIn("slow");

setTimeout("getRefresh();", 1000); }

$(document).ready(getRefresh); </script> </head> <body> Time No Refresh = <? echo date("H:i:s"); ?> <br> Auto Refresh = <div id="autoRefresh"> <? echo date("H:i:s"); ?> </div> </body>

ไฟล์ time.php

<? echo date("H:i:s"); ?>

ผิดพลาดประกาศใดขออภัยด้วยนะครับ

คืออยากจะรบกวนเพิ่มอีกหน่อยได้ใหมครับว่า

ถ้าเราอยากเพิ่มเงื่อนไขว่า ให้เช็คก่อนว่ามีข้อมูลเปลี่ยนแปลงป่าว แต่ถ้าไม่เปลี่ยนแปลงให้อยู่เฉยๆไม่ต้องรีเฟรชอ่ะครับ