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

Question

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

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

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

return "<br><a href='' onclick='openImage()'><img src=" + Base64StringofScreenshot
       + " style='height:200px; width:350px; padding:0;'></img></a>"
       + "<script>"
       + "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>"; 

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

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

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

按RMB键并选择“在新窗口中打开图像”时，右侧图像打开，页面不会重新加载

Answer 1

页面正在重新加载，因为您使用了一个链接来调用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>"; 

Answer 2

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

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

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

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

<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>

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