Click here to Skip to main content
14,737,485 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
So I'm dynamically adding some content to a DIV, which potentially includes
<style>
tags.

This works great, but the browser (Chrome in this case) appears to be caching the CSS, so that if I change the CSS in the "editor", the HTML "preview" (inside the DIV) no longer updates. If I change the referencing CSS name (for example, the class name) then the "preview" updates reflecting the new change.

After much googling, I have not been able to find a way to tell the browser to discard it's CSS cache. This is NOT CSS being loaded from the server. It's IN MEMORY on the client-side, as part of the "editor" whose contents then get copied over to the DIV.

So please, don't tell me I need to add
version
information to the href -- the CSS is NOT coming from the server -- there is no server -- and therefore there is no href!

So, is there some way to tell the browser to clear/refresh it's CSS cache?

Adding meta tags to not cache didn't work.

What I have tried:

meta tags didn't work. No luck with googling the answer!
Posted
Updated 12-Sep-19 9:44am

1 solution

Never mind - I just found the answer, after a couple days of googling, I discovered the CSS DOM. So doing something like this:

document.styleSheets[2].deleteRule(0)


for the style sheets that aren't part of the overall page, works. And oddly, once the rules are deleted, it continues to work when I edit the style values in the "editor."
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900