如何退出网页图片幻灯片并跳转至最后显示图片的对应页面？

问题概述 #

搭建了随机图片幻灯片，按ESC键可中断，但中断后会跳转到幻灯片启动时的首张图片对应HTML页面，而非最后显示的图片页面。

当前实现架构 #

• 图片存储在Linux Apache服务器，使用单个HTML文件./slsh.html作为幻灯片页面
• cronjob每10分钟启动bash脚本，脚本每1.5秒更新固定名称的符号链接./slsh.jpg，随机指向子目录内的图片以生成随机序列
• 浏览器通过JavaScript每9秒刷新背景图（添加时间戳避免缓存）加载最新的./slsh.jpg
• 现有代码中ESC键跳转路径为硬编码的固定UID页面，导致与当前显示图片不匹配

现有代码片段 #

HTML #

<html>
<head>
  <title>20070828-001264-012</title>
</head>
<body id="body" onload="NextDivPic()">
  <div class="bg" id="a" onclick="NextDivPic()"></div>
</body>
</html>

CSS #

body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url('./slsh.jpg');
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgb(10,10,10);
}

JavaScript #

// KEYS
window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);
var keys = [];
function keysPressed( event) {
    keys[ event.keyCode] = true;

    if (event.keyCode == 27 || event.keyCode == 36) { //go to UID html : ESCAPE,HOME keys
        window.location.href = "./html/20070828-001264-012.html";
        event.preventDefault();
    }
    else if (event.keyCode == 81) { //go to main.html : q key
        window.location.href = "./main.html";
        event.preventDefault();
    }
    else if (event.keyCode == 13) { //refresh URL : ENTER
        location.reload();
        event.preventDefault();
    }
    else if (event.keyCode == 32 || event.keyCode == 39) { //load next=newest slsh.jpg : SPACEBAR,RIGHTARROW
        NextDivPic();
        event.preventDefault();
    }
};

function keysReleased(event) { // mark keys that were released
    keys[event.keyCode] = false;
};


// TIMER fx
var timerId;
var timerIdArray = [];
timerId = setInterval('refresh()', 8888);
timerIdArray.push( timerId);


// REFRESH fx
function refresh() {
    var timestamp = new Date().getTime();
    document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
}

// NEXT DIV PIC fx
function NextDivPic() {
    for(var i=0;i<timerIdArray.length;i++){
        clearInterval(timerIdArray[i]);
    };
    timerId = setInterval('refresh()', 9000);
    timerIdArray.push( timerId);
    var timestamp = new Date().getTime();
    document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
    event.preventDefault();
}

可行解决方案 #

方案1：服务器端同步输出当前图片UID #

修改更新符号链接的bash脚本，每次更新slsh.jpg时，同时生成包含当前图片UID的文本文件（如current_uid.txt），前端每次刷新图片时读取该文件记录UID。

服务器脚本修改

# 获取符号链接指向的真实图片路径
TARGET=$(readlink -f ./slsh.jpg)
# 提取文件名中的UID（假设图片名为[UID].jpg）
UID=$(basename "$TARGET" .jpg)
# 将UID写入文本文件
echo "$UID" > ./current_uid.txt

前端JS修改

// 全局变量存储当前UID
window.currentImageUid = '';

// 刷新函数改为异步，先获取UID再加载图片
async function refresh() {
    try {
        // 请求服务器上的UID文件
        const uidResp = await fetch('./current_uid.txt');
        window.currentImageUid = (await uidResp.text()).trim();
        
        // 加载最新图片
        const timestamp = new Date().getTime();
        document.getElementById("a").style.backgroundImage = `url(./slsh.jpg?t=${timestamp})`;
    } catch (err) {
        console.error('获取UID失败:', err);
    }
}

// 修改ESC键跳转逻辑
function keysPressed( event) {
    keys[ event.keyCode] = true;

    if (event.keyCode == 27 || event.keyCode == 36) {
        // 使用当前存储的UID跳转
        if (window.currentImageUid) {
            window.location.href = `./html/${window.currentImageUid}.html`;
        }
        event.preventDefault();
    }
    // 其他按键逻辑不变...
};

方案2：图片元数据存储UID，前端读取 #

给每张JPG图片添加自定义元数据（如Exif的UserComment字段）存入UID，前端加载图片时读取元数据获取UID。

服务器端批量写入元数据（使用exiftool）

# 遍历所有图片，将文件名（不含后缀）写入UserComment字段
for FILE in /path/to/images/*.jpg; do
    UID=$(basename "$FILE" .jpg)
    exiftool -UserComment="$UID" "$FILE"
done

前端JS修改（需引入ExifReader库）

window.currentImageUid = '';

// 读取图片元数据获取UID
async function getImageUid(imgUrl) {
    const img = new Image();
    img.crossOrigin = "anonymous";
    await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
        img.src = imgUrl;
    });
    
    // 读取Exif元数据
    const tags = await ExifReader.load(img);
    return tags.UserComment?.value || '';
}

// 刷新函数修改
async function refresh() {
    const timestamp = new Date().getTime();
    const imgUrl = `./slsh.jpg?t=${timestamp}`;
    window.currentImageUid = await getImageUid(imgUrl);
    document.getElementById("a").style.backgroundImage = `url(${imgUrl})`;
}

// ESC键跳转逻辑同方案1

方案3：同步更新HTML页面的UID变量 #

修改bash脚本，每次更新符号链接时，直接替换slsh.html中的全局UID变量，前端直接使用该变量跳转。

服务器脚本修改

TARGET=$(readlink -f ./slsh.jpg)
UID=$(basename "$TARGET" .jpg)
# 替换HTML中的全局UID变量
sed -i "s/window.currentImageUid = '.*';/window.currentImageUid = '$UID';/" ./slsh.html
# 可选：更新页面标题
sed -i "s/<title>.*<\/title>/<title>$UID<\/title>/" ./slsh.html

前端HTML修改

在<head>中添加全局变量声明：

<script>
window.currentImageUid = '';
</script>

前端JS修改

ESC键跳转逻辑直接使用全局变量：

if (event.keyCode == 27 || event.keyCode == 36) {
    if (window.currentImageUid) {
        window.location.href = `./html/${window.currentImageUid}.html`;
    }
    event.preventDefault();
}

内容的提问来源于stack exchange，提问作者pisti