在Java中使用Javascript函数将动态值传递给HTML标记

大家好，我的社区， 在过去的几天里，我一直在努力解决以下问题。我已经浏览了几十个堆叠的问题，开发博客，并问同事们-但我仍然被卡住了。我不得不在这里问一个问题。 问题是什么

我正在用Java将几个Base64编码的图像添加到HTML测试执行报告中。我想在新的标签页/弹出窗口中打开并单击它们。以下是代码：

String Base64StringofScreenshot=“data:image/png；base64，”+base64.getEncoder（）.encodeToString（数据）；
返回“
”
+ ""
+“函数openImage（）{var newTab=window.open（）；”
+“newTab.document.body.innerHTML=\”\”；\r\n”
+“返回false；}\r\n”
+ ""; 

我在这里做了一些自定义格式，所以在复制时可能无法完全工作（缺少“或两个”）

问题是，无论我单击哪个图像，都会打开最新的图像，并重新加载HTML页面。 我认为必须在JS函数中添加参数，以便每次执行时都设置正确的img源代码。不幸的是，这远远超出了我在Java字符串中处理JS脚本的能力

我恳请您帮助我正确实施，并帮助我理解我做错了什么

---

按RMB键并选择“在新窗口中打开图像”时，右侧图像打开，页面不重新加载，页面正在重新加载，因为您使用链接调用您的

openImage

功能。 我已经删除了链接，并添加了一个事件侦听器，用于侦听图像上的单击，这应该在不重新加载的情况下调用您的函数。这是可选的，但在某个时候删除事件侦听器是一个很好的做法，一旦不再需要它

String Base64StringofScreenshot = "data:image/png;base64," + Base64.getEncoder().encodeToString(data);

return "<br><img id=\"myImage\" src=" + Base64StringofScreenshot
       + " style='height:200px; width:350px; padding:0;'></img>"
       + "<script>"
       + "let myImage = document.getElementById(\"myImage\");"
       + "myImage.addEventListener(\"click\", openImage, false);"
       + "function openImage() {var newTab = window.open(); "
       + "newTab.document.body.innerHTML = \"<img src='" + Base64StringofScreenshot
       + "' style='max-height: 100%; max-width: 100%'>\";\r\n"         
       + " return false; }\r\n"
       + "</script>"; 

String Base64StringofScreenshot=“数据：图像/png；base64，“+base64.getEncoder（）.encodeToString（数据）；
返回“
”
+ ""
+“让myImage=document.getElementById（\“myImage\”）；"
+“myImage.addEventListener（\”单击“”，openImage，false）；"
+“函数openImage（）{var newTab=window.open（）；”
+“newTab.document.body.innerHTML=\”\”；\r\n”
+“返回false；}\r\n”
+ ""; 

如果您遍历图像或返回多个图像，只需将onclick触发器添加到img标记中即可

String Base64StringofScreenshot = "data:image/png;base64," + Base64.getEncoder().encodeToString(data);

return "</br><img src=\"" + Base64StringofScreenshot + "\" onclick="debugBase64(\"" + Base64StringofScreenshot + "\")">"

String Base64StringofScreenshot=“数据：图像/png；base64，“+base64.getEncoder（）.encodeToString（数据）；
返回“
”

在一页的末尾，在你放置图像的地方，写下以下脚本：

<script>
    function debugBase64(base64URL){
        var win = window.open();
        win.document.write('<iframe src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
    }
</script>

函数debugBase64（base64URL）{
var win=window.open（）；
win.document.write（“”）；
}

---

它防止“不允许将顶部框架导航到数据URL:”Chrome浏览器中出现错误（这是安全更新）。在其他浏览器中，您可以使用-

“onclick=“window.open（this.src）”

Hello@Patrick-我尝试了您的解决方案，但失败了，因为会有多个具有相同ID的图像，这是可以理解的，被浏览器（Chrome）作为错误抛出。你好@Yuriy Myorov。您的解决方案正在工作，尽管它需要重新设计报告的创建（我只需要在最后添加JS脚本，而不是在每个屏幕截图之后）。