Java生成HTML测试报告时JS实现Base64缩略图点击打开对应全图的异常排查

• 全局函数重复定义覆盖：你在每一次拼接单张截图的HTML时，都插入了一段同名openImage函数的定义代码。浏览器加载页面时，后插入的函数会覆盖之前所有同名称的全局函数，最终所有链接的点击事件调用的都是最后一次生成的openImage，这个函数里硬编码了最后一张截图的Base64地址，所以无论点哪个缩略图，打开的都是最近嵌入的那张图。你观察到右键打开图片是正常的，是因为该操作直接读取img标签本身的src属性，不依赖这个被覆盖的JS函数，也反过来印证了这个问题是核心故障点。
• 空href触发页面重载：<a>标签的href设置为空字符串时，浏览器会默认将其识别为跳转至当前页面地址，即使onclick事件加了return false，部分场景下依然会触发主页面重载。
• 无动态参数传递：所有点击事件没有把当前缩略图的地址作为参数传入函数，完全依赖函数内部硬编码的图片地址，从逻辑上就无法匹配对应图片。

实现思路 #

• 全局JS函数仅在报告页面初始化时定义一次，避免重复覆盖
• 点击事件通过参数传递当前截图的Base64地址，不再依赖硬编码值
• 替换空href为无跳转占位值，从根源避免主页面重载

代码示例 #

全局JS定义（放在报告HTML的头部/最开头位置，仅需写一次） #

// 通用图片打开函数，接收图片地址参数
function openImage(imageSrc) {
  const newWin = window.open('', '_blank');
  newWin.document.body.style.margin = '0';
  newWin.document.write(`<img src="${imageSrc}" style="max-width: 100%; max-height: 100vh; display:block; margin:0 auto;">`);
  return false;
}

单张截图的HTML片段拼接逻辑（循环遍历所有截图时重复调用即可） #

import java.util.Base64;

// 生成单张截图的Base64地址
String base64ImgSrc = "data:image/png;base64," + Base64.getEncoder().encodeToString(originalImageData);

// 拼接可正常工作的HTML片段
String snippet = String.join("",
    "<a href=\"javascript:void(0)\" onclick=\"return openImage('" + base64ImgSrc + "')\">",
    "<img src='" + base64ImgSrc + "' style='height:200px; width:350px; padding:0; border:1px solid #eee; cursor:pointer;'>",
    "</a>",
    "<br>"
);

效果说明 #

• 点击任意缩略图时，会将自身的图片地址作为参数传入全局的openImage函数，打开对应尺寸的图片
• 因为href设置为无跳转占位值，不会触发主页面重载
• 由于全局函数只定义一次，不会出现函数被覆盖、所有图指向最后一张的问题
• 该实现下右键“在新窗口打开图片”的行为不受影响，和之前的正常表现保持一致

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