如何防止 chrome 中的 iframe 缓存？

Question

我知道这个问题已被问过很多次，但我仍然无法解决这个问题。我认为有人根据我的情况提出解决方案会有所帮助。

我有一个 random-video.php 页面，它从一个数组中生成一个随机视频，这工作正常并且不会在 chrome 中缓存：

<?php
$array = [
    "http://www.mentor-distribution.com/media/Introducing_MConnect.mp4",
    "http://www.mentor-distribution.com/media/hs_freedom_chair.mp4",
	"http://www.mentor-distribution.com/media/quickstand.mp4",
	"http://www.mentor-distribution.com/media/MFlex.mp4"
];
$randomIndex = array_rand($array);
$random = $array[$randomIndex];
?>

<iframe width="320" height="187" frameborder="0" allowfullscreen src="<?php echo htmlspecialchars($random); ?>"></iframe>

这是每次尝试显示随机视频的部分 html 页面，但一旦加载它就不会更改视频，直到您清除缓存：

<div class="rightsidevid"><iframe width="320" height="187" src="http://mentor-distribution.com/internal/random-video.php" frameborder="0" scrolling="no" allowfullscreen></iframe></div>

如果有人可以提供帮助，将不胜感激。我确定您可以通过在 url 末尾添加一个数字来实现这一点（例如 url?RandomGenNumber），但我不知道该怎么做。

Answer 1

不确定这是否适用于 Chrome；但是，Firefox 也有同样的问题。我在 Firefox 上尝试了以下解决方法，它确实有效：

<iframe src="webpage.html?var=xxx" id="article"></iframe>

<script>
var article = document.getElementById("article");
article.contentWindow.location.href = article.src;
</script>

Answer 2

通过将以下缓存设置设置为我的 .htaccess 文件，我让它在 Chrome 中工作。

##
# Expires Headers YSlow START
# Browser caching optimization by Sam Riveros
##

<IfModule mod_headers.c>

	# Turn on Expires and set default to 0
	ExpiresActive On
	ExpiresDefault A0
 
	# Set up caching on media files for 1 year (forever?)
	<FilesMatch "\.(ico|pdf|mp4|ogg|webm|svg+xml|ttf|otf|woff|woff2)$">
		ExpiresDefault A29030400
		Header append Cache-Control "public"
	</FilesMatch>

	# Set up caching on media files for 1 week
	<FilesMatch "\.(jpg|jpeg|png)$">
		ExpiresDefault A604800
		Header append Cache-Control "public"
	</FilesMatch>
 
	# Set up caching for commonly updated static files for 1 week
	<FilesMatch "\.(txt|html|js|css)$">
		ExpiresDefault A604800
		Header append Cache-Control "proxy-revalidate"
	</FilesMatch>
 
	# Force no caching for dynamic files
	<FilesMatch "\.(php)$">
		ExpiresActive Off
		Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
		Header set Pragma "no-cache"
	</FilesMatch>

</IfModule>

<IfModule mod_expires.c>

	#Redundancy in case server admin turn mod_headers.c off

	ExpiresActive on
	ExpiresDefault										"access plus 1 month"
	
	#CSS
	ExpiresByType text/css								"access plus 1 year"

	#Data interchange
	ExpiresByType application/json						"access plus 0 seconds"
	ExpiresByType application/xml						"access plus 0 seconds"
	ExpiresByType text/xml								"access plus 0 seconds"
	
	#Favicon
	ExpiresByType image/x-icon							"access plus 1 year"
	
	#HTML components (HTCs)
	ExpiresByType text/x-component						"access plus 1 month"
	
	#HTML
	ExpiresByType text/html								"access plus 1 week"
	
	#Javascript
	ExpiresByType application/javascript				"access plus 1 year"
	
	#Manifest files
	ExpiresByType application/x-web-app-xanifest+json	"access plus 0 seconds"
	ExpiresByType text/oache-xanifest					"access plus 0 seconds"
	
	#Media
	ExpiresByType image/jpg								"access plus 1 week"
	ExpiresByType image/jpeg							"access plus 1 week"
	ExpiresByType image/png								"access plus 1 week"
	ExpiresByType audio/ogg								"access plus 1 year"
	ExpiresByType video/mp4								"access plus 1 year"
	ExpiresByType video/ogg								"access plus 1 year"
	ExpiresByType video/webm							"access plus 1 year"

	#Web feeds
	ExpiresByType application/atom+xml					"access plus 1 hour"
	ExpiresByType application/rss+xml					"access plus 1 hour"
	
	#Web fonts
	ExpiresByType image/svg+xml							"access plus 1 year"
	ExpiresByType application/x-font-ttf				"access plus 1 year"
	ExpiresByType application/x-font-truetype			"access plus 1 year"
	ExpiresByType application/x-font-opentype			"access plus 1 year"
	ExpiresByType application/font-woff					"access plus 1 year"
	ExpiresByType application/font-woff2				"access plus 1 year"
	ExpiresByType application/vnd.ms-fontobject			"access plus 1 year"
	ExpiresByType application/vnd.xs-fontobject			"access plus 1 year"
	ExpiresByType application/font-sfnt					"access plus 1 year"

</IfModule>

<IfModule mod_deflate.c>

	# Compress HTML, CSS, JavaScript, Text, XML and fonts
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/x-font-otf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE image/x-icon
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/xml

	# Remove browser bugs (only needed for really old browsers)
	BrowserMatch ^Mozilla/4 gzip-only-text/html
	BrowserMatch ^Mozilla/4\.0[678] no-gzip
	BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
	Header append Vary referer

</IfModule>

##
# Expires Headers YSlow END
##

Answer 3

Sam Riveros 的 Expires Headers YSlow START 如果您还没有的话，是一件非常好的事情。这将有助于优化您的网站。但是，您需要纠正该问题的唯一行是 Header append Vary referer。将以下内容添加到您的 .htaccess 文件中，它应该可以正常工作而无需其他任何东西。甚至没有 JavaScript：

<IfModule mod_deflate.c>

	Header append Vary referer

</IfModule>