CODEWITHSUNDEEP
jquery
MAX POWER
MAX POWER

Reputation: 5448

Dynamically inserting stylesheet into IFRAME

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.

Upvotes: 4

Views: 6329

Answers (2)

osahyoun
osahyoun

Reputation: 5231

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" />');
  });
});

Upvotes: 4

Mike
Mike

Reputation: 3024

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

However I recommend this only for developing / testing because otherwise you will request each time at every page a new css file and this brings up more 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 you can write this as:

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

Upvotes: 0

Related Questions