Dynamically embed a style sheet in IFRAME

Question

I have done the following:

<iframe id="portal" src="page-on-my-domain.php"></iframe> $(document).ready(function() { $('#portal').load(function(){ $('#portal').contents().find('head').append('<link href="/css/iframe.css" rel="stylesheet" type="text/css" />'); }); }); 

This works great, but the problem is that whenever I update the stylesheet, the updated styles are not applied in the IFRAME. I tried reloading the page and iframe, but it is still gaining old styles.

Answer 1

Could this be the browser cache? Adding a timestamp to the URL can help:

 $(document).ready(function() { $('#portal').load(function(){ var timestamp = +(new Date()); $('#portal').contents().find('head').append('<link href="/css/iframe.css?'+ timestamp +'" rel="stylesheet" type="text/css" />'); }); }); 

Answer 2

Try setting timestamp css href="style.css?<?php echo date('ljSFYhis'); ?>" This will prevent caching of the stylesheet.

However, I recommend this only for development / testing, because otherwise you will each time request a new css file on each page, and this will increase the load on the server.

EDIT: timestamp in javascript var ts = Math.round((new Date()).getTime() / 1000); as recommended by http://www.electrictoolbox.com/unix-timestamp-javascript/ so that you can write this as:

 var ts = Math.round((new Date()).getTime() / 1000); href="style.css?'+ts+'"