css and js files are being cached by the iframe

Question

I am using a jquery plugin named facebox. It works very well but I am faced! with an issue. It looks like its iframe method is causing my browser to cach the css that is being loaded in the target page.

This is how I call it in my page in the jquery ready state.

$('a.participate').click( function(){
            $.facebox({
                iframe: '" . $urlparticipate . "',
                rev: 'iframe|550|550'
            });
            return false ;
        });

where $urlparticipate is the url that will open in the iframe. I looked closer in the facebox.js and I found the following method that seems to be used by the plugin to create the iframe.

function fillFaceboxFromIframe(href, klass, height, width) {
    $.facebox.reveal('<iframe scrolling="auto" marginwidth="0" width="'+width+'" height="' + height + '" frameborder="0" src="' + href + '" marginheight="0"></iframe>', klass)
  }

How can I prevent the css from being cached? I know that is being cached because I change the css style of an element. I even changed some js code that is being loaded and its still loading the old one.

I also tried the following:

1. Adding in the target page on the front end in the head

   meta http-equiv="Cache-control" content="no-cache"

   meta http-equiv="Pragma" content="no-cache"

   meta http-equiv="Expires" content="0"

2. I tried to add some headers from code behind (php)

   header("Cache-Control: no-cache");

   header("Pragma: no-cache");

All with no success.. What am I missing?

Answer 1

You can always try "versioning" the CSS reference on the page. There are good and not-so-good ways to do it: With a single, static version number you append every time you make a change, or a randomly generated GUID that will effectively force EVERY request to the page to retrieve the CSS file(s). The better option is the static one, like this:

<link type="text/css" rel="stylesheet" href="cssfile.css?1.12" />