javascript - If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

Question

Welcome To Ask or Share your Answers For Others

javascript - If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

When I used JS to first add and then delete an image from the browser I anticipated that the screen would render clear when I left the page and then returned using the back button. However when I returned the image was once again present on the screen. This happened despite the fact that the screen is set to start clear, i.e. <img src=""> and before I left I used the Delete Image button to remove the image that I had added. For some reason the image was there again.

How to recreate this behavior:

Open Page 1
Choose an image file from your system
JavaScript will set the value of <img src=""> to your image and display it
Click the Delete Image button and the image will be removed
Click the Link To Page Two button
Use the back button on your browser and when you return the image will be on the screen again
If instead of the back button you return with Link To Page One the screen starts fresh without an image

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>

question from:https://stackoverflow.com/questions/65866035/if-the-value-of-img-src-is-changed-by-a-js-click-event-why-doesnt-this-value-st

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:25:06+0000

The most probable explanation is that the browser remembers last successfully loaded content - when you change the source into empty string the browser has "nothing" to cache so there is a chance the engine of the specific browser (or all of them) leaves the cache unchanged - try changing the source into something like "pixel image" in your deleteImage function like this:

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

it will load a transparent 1x1px png and probably replace the cached image. ...or use the cache controlling headers on the server - to tell the browser not to cache.

on the second thought

in your delete fuction add this line:

inputImageFile.value = '';

it works now ;)

it looks like the input plays the role - the value is being cached - and when browser sets the value from cache - i guess the 'input' event fires - and your script displays the image ;)

Categories

javascript - If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

javascript - If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags