Dynamiquement dans IFRAME stylesheet Insertion

Question

Je l'ai fait ce qui suit:

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

}); 

Cela fonctionne très bien, mais le problème est à chaque fois que je mets à jour la feuille de style, les styles mises à jour ne sont pas appliquées dans le IFRAME. J'ai essayé de recharger la page et l'iframe mais il reprend toujours les anciens styles.

Answer 1

Serait-ce le cache du navigateur? L'ajout d'un horodatage à l'URL peut vous aider:

$(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

Essayez d'horodater le css href="style.css?<?php echo date('ljSFYhis'); ?>" Cela empêchera la mise en cache de la feuille de style.

Cependant, je recommande ceci uniquement pour le développement/test parce que sinon, vous demanderez chaque fois à chaque page un nouveau fichier CSS, ce qui augmente la charge sur le serveur.

EDIT: horodatage en javascript var ts = Math.round((new Date()).getTime()/1000); tel que recommandé par http://www.electrictoolbox.com/unix-timestamp-javascript/ afin que vous puissiez écrire cela comme:

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