刷新后的持久数据

Question

我有一个遇到问题的网页。它工作正常：您从下拉菜单中选择并更新图像。

问题是手动刷新页面时：显示初始图像但下拉菜单选项保持不变；好吧，我修好了。

真正的问题是刷新后，当我选择一个新项目时，由于某种原因，刷新前的项目会显示出来。

如何更改此设置，以便显示刷新后的新选择而不是之前的选择？

我的代码在 Chrome、Firefox 和 Safari 中运行良好，但在 IE9 中无法运行。

这是我正在使用的 JavaScript 代码：

function doMillviewInitialise()
{
    window.document.forms[0].reset();
}

这是 HTML：

<form>
    <select id="millviewStyle" onchange="doMillview();">
        <option value="self">Millview @ Guygar.com&copy;</option>
        <option>----------------------</option>
        <option value="midnightExpress">Midnight Express</option>
        <option value="turnedOn">Turned On</option>
        <option value="storage">Storage</option>
        <option value="plasticStress">Plastic Stress</option>
        <option value="mirrorEffect">Mirror Effect</option>
        <option value="okComputer">OK Computer</option>
        <option value="repertoire">Repertoire</option>
        <option value="calibrate">Calibrate</option>
        <option value="hysteria">Hysteria</option>
        <option value="lastExit">Last Exit</option>
    </select>
</form>

Answer 1

iGuygar IE9 在 iframe 以及其他非常标准的浏览器功能（例如 CSS3 文本阴影）方面存在问题，您可以做的是创建一个 div，然后将其放置在离屏幕大约 10000 像素的位置，然后将图像预加载到div。

所以你的 div 的 HTML：

<div id="imgpreload">
 <img src="images/pic1.png" alt="pic1" id="pic1">
 <img src="images/pic2.png" alt="pic2" id="pic2">
 <img src="images/pic3.png" alt="pic3" id="pic3">
</div>

CSS：

#imgpreload {
  position:absolute;
  left:9999px; 
}

有些人还喜欢添加（不必要的，移动客户除外）：

width:1px;
height:1px;
overflow:hidden;

到那个 CSS。这将在所有已知浏览器中预加载您的图像。

Answer 2

有几种方法可以将图像加载（或预加载）到页面中，如果这是您所追求的。您可以使用 javascript 将所有图像加载到“隐藏”容器 (<div style="display: none">)。

var anImage = new Image
anImage.onload = function() {...} // keep a counter here to make sure all images are in?
anImage.src = ...
$imageContainer.append(anImage)

浏览器会缓存这些图像，因此您甚至可以在所有图像加载后摆脱容器，如果您愿意！

另一个优点是在页面刷新的情况下不会从服务器重新加载图像。如果您希望在刷新后页面加载时显示特定图像，我建议将window.location.hash（URL 哈希）更改为图像的 ID，并在页面加载时读取此属性并显示适当的图像。

http://..../millview/page.html#midnightExpress

然后：

window.onload = function() {
  selected = window.location.hash.substring(1); // selected === 'midnightExpress'
  // show the image
}

对此进行实验...您可能会发现将 URL 哈希用作跨页面/刷新/历史记录的一种“持久性”也非常有用。

（如果您认为这太啰嗦且无用，请回帖！）

浏览器（包括 IE）通过其 URL 缓存图像。因此，只要 src 属性对于预加载和当前查看的图像保持不变，图像就不会从服务器重新加载，只是从缓存中提取 - 这非常快。加载图像后，可以丢弃预加载的图像元素 - 我们只希望浏览器缓存的图像

Answer 3

我看到您描述的问题，我猜 IE 正在缓存 iframe。其实用IE9的开发者工具看iframe，可以看到它正在加载iframe中之前选择的文档。

我建议简化您的代码。我不知道您的最终目标是什么，但我为您创建了一个不使用 iframe 的简单测试用例。您可以在this JSFiddle 中实时查看。请注意，我使用 jQuery 来简化 DOM 操作。

HTML：

<div id="imageViewer">
    <img id="theImage" src="http://guygar.com/millview/self/self00.jpg" alt="The Image!">
</div>

<select id="imageSelector" name="imageSelector">
    <option value="" selected></option>
    <option value="midnightExpress">Midnight Express</option>
    <option value="mirrorEffect">Mirror Effect</option>
    <option value="okComputer">OK Computer</option>
</select>

JavaScript：

$(function() {
    var $theImage = $('#theImage'),
        baseURL = 'http://guygar.com/millview/',
        images = {
            'midnightExpress': 'midnightExpress00.jpg',
            'mirrorEffect': 'mirrorEffect00.jpg',
            'okComputer': 'okComputer00.jpg'
        };

    $('#imageSelector').bind('change', function() {
        var selection = this.value,
            url = [
                baseURL,
                selection,
                '/',
                images[selection]
            ].join('');
        $theImage.attr('src', url);
    });
});

Answer 4

页面加载后，您可以强制重置表单（您也需要一个表单）：

document.forms[0].reset()