Click here to Skip to main content
14,357,617 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100