1
我的主頁有8個圖像可以通過上傳頁面進行更改。用戶在更改8個圖像後導航回主頁以查看新圖像。
但是，新圖像不顯示。舊的圖像仍然存在，直到瀏覽器刷新。
我猜這是因爲瀏覽器正在緩存頁面，然後重新加載緩存頁面。
我到目前爲止試過的東西。
將這一行代碼添加到標題。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->
並在頁面底部添加一個帶有上述代碼的標題。
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
但是這種解決方案對我無效。
任何幫助或推動正確的方向將不勝感激。
整個HTML頁面剛剛開始我已經在錯誤的地方添加了上述解決方案，並在需要時使用以編寫解決方案。
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div id="title">
<h1>Bass Clef Photography</h1>
</div>
<div id="tagLine">Passion 4 Live Music & Passion 4 Photography</div>
<div id="tabsContainer">
<div id="centerContainer">
<div class='tab zero'>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a></li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a></li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="photoFrame">
<img src="uploads/picture01.jpg" class="demo-img" alt="">
<img src="uploads/picture02.jpg" class="demo-img" alt="">
<img src="uploads/picture03.jpg" class="demo-img" alt="">
<img src="uploads/picture04.jpg" class="demo-img" alt="">
<img src="uploads/picture05.jpg" class="demo-img" alt="">
<img src="uploads/picture06.jpg" class="demo-img" alt="">
<img src="uploads/picture07.jpg" class="demo-img" alt="">
<img src="uploads/picture08.jpg" class="demo-img" alt="">
</div>
</div>
</body>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/screenfull.js"></script>
<script>
$(function() {
$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$('#request').click(function() {
screenfull.request($('#container')[0]);
// does not require jQuery, can be used like this too:
// screenfull.request(document.getElementById('container'));
});
$('#exit').click(function() {
screenfull.exit();
});
$('#toggle').click(function() {
screenfull.toggle($('#container')[0]);
});
$('#request2').click(function() {
screenfull.request();
});
$('.demo-img').click(function() {
screenfull.toggle(this);
});
$('#demo-video').click(function() {
screenfull.toggle(this);
});
// a little hack to be able to switch pages while in fullscreen.
// we basically just creates a seamless iframe and navigate in that instead.
$('#iframe').click(function() {
// We create an iframe and fill the window with it
var iframe = document.createElement('iframe')
iframe.setAttribute('id', 'external-iframe');
iframe.setAttribute('src', 'http://bbc.com');
iframe.setAttribute('frameborder', 'no');
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.right = '0';
iframe.style.bottom = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
$('#container').prepend(iframe);
document.body.style.overflow = 'hidden';
})
document.addEventListener(screenfull.raw.fullscreenchange, function() {
var elem = screenfull.element;
$('#status').text('Is fullscreen: ' + screenfull.isFullscreen);
if (elem) {
$('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
}
if (!screenfull.isFullscreen) {
$('#external-iframe').remove();
document.body.style.overflow = 'auto';
}
});
$(document).on(screenfull.raw.fullscreenchange, function() {
console.log('Fullscreen change');
});
// trigger the onchange() to set the initial values
screenfull.onchange();
});
</script>
<script>
var _gaq=[['_setAccount','UA-25562592-1'],['_trackPageview'],['_trackPageLoadTime']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
</html>
聽起來像是一個很好的解決方案。但過了一會兒，所有圖片上傳到的文件夾很快就會填滿。我目前的解決方案覆蓋了以前的文件。或者我誤解了答案？ –
啊，也許我的回答並不清楚 - 網絡服務器將忽略查詢字符串（？和後面的所有內容）。所以在上面的例子中，你只需要在服務器上存儲'my-image.gif'。您可以使用諸如PHP或Java之類的東西（每次都是唯一一個）來附加查詢字符串，以使瀏覽器獲得新版本的圖像。 –
所以，要清楚的是，您仍然可以像現在一樣覆蓋服務器上相同名稱的文件。 –