时间戳

首页 > 解决方案 > 如果 img src 的值被 JS 单击事件更改，为什么当使用后退按钮重新访问包含它的页面时，该值不开始为空？

javascript - 如果 img src 的值被 JS 单击事件更改，为什么当使用后退按钮重新访问包含它的页面时，该值不开始为空？

问题描述

当我使用 JS 首先从浏览器中添加然后删除图像时，我预计当我离开页面然后使用返回按钮返回时屏幕会呈现清晰。但是，当我返回时，图像再次出现在屏幕上。尽管屏幕设置为清晰，即<img src="">在我离开之前，我使用Delete Image按钮删除了我添加的图像，但还是发生了这种情况。由于某种原因，图像又出现了。

如何重新创建此行为：

  1. 打开第 1 页
  2. 从您的系统中选择一个图像文件
  3. JavaScript 将为<img src="">您的图像设置值并显示它
  4. 单击Delete Image按钮，图像将被删除
  5. 点击Link To Page Two按钮
  6. 使用浏览器上的后退按钮，当您返回时，图像将再次出现在屏幕上
  7. 如果您使用屏幕返回而不是返回按钮，Link To Page One则在没有图像的情况下重新开始

page-one.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    
<body>

    <h1>Page One</h1>
    <p><a href="page-two.html">link to Page Two</a></p>

    <p><img src="" id="theImage"></p>

    <p><input type="file" name="imageFile" accept=".gif,.jpg,.png" id="inputImageFile"></p>

    <button id="theButton">Delete Image</button>

    <script>

        let theImage = document.querySelector('#theImage');
        let inputImageFile = document.querySelector('#inputImageFile');
        let theButton = document.querySelector('#theButton');

        inputImageFile.addEventListener('input', imageUpload);
        theButton.addEventListener('click', deleteImage);

        function imageUpload(e) {

            let uploadedFile = e.target.files[0];

            let forViewing = new Image();
            forViewing.src = URL.createObjectURL(uploadedFile);

            theImage.src = forViewing.src;

        }

        function deleteImage() {

            theImage.src = '';

        }

    </script>

</body>

</html>

page-two.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
    
<body>

    <h1>Page Two</h1>
    <p><a href="page-one.html">link to Page One</a></p>

</body>

</html>

标签： javascript

解决方案

最可能的解释是浏览器会记住上次成功加载的内容 - 当您将源更改为空字符串时，浏览器“没有”要缓存，因此特定浏览器（或所有浏览器）的引擎有可能离开缓存不变 - 尝试在你的 deleteImage 函数中将源更改为类似“像素图像”的东西，如下所示：

theImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=';

它将加载一个透明的 1x1px png 并可能替换缓存的图像。...或使用服务器上的缓存控制标头 - 告诉浏览器不要缓存。

第二个想法

在您的删除功能中添加以下行：

inputImageFile.value = '';

它现在可以工作了；）

看起来输入起了作用——值被缓存了——当浏览器从缓存中设置值时——我猜“输入”事件会触发——你的脚本会显示图像；）

推荐阅读