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 is working fine, however the problem is whenever I update the stylesheet, the updated styles are not being applied in the IFRAME. I have tried reloading the page and the iframe but it is still picking up the old styles.

Answer 1

Could it be the browser cache? Appending a timestamp to the URL could 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" />');
  });
});