Question

我做了以下事情：

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

});

这很好用，但问题是每当我更新样式表时，更新的样式都没有在IFRAME中应用。我已经尝试重新加载页面和iframe，但它仍然在拾取旧样式。

Answer 1

可能是浏览器缓存吗？在URL中附加时间戳可能会有所帮助：

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

尝试为css href="style.css?<?php echo date('ljSFYhis'); ?>"添加时间戳，这样可以防止缓存样式表。

但是我推荐这只用于开发/测试，否则你会在每个页面上每次都要求一个新的css文件，这会给服务器带来更多的负担。

编辑：http://www.electrictoolbox.com/unix-timestamp-javascript/推荐的javascript var ts = Math.round((new Date()).getTime() / 1000);中的时间戳，因此您可以将其写为：

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

将样式表动态插入IFRAME

2 个答案: