时间戳

首页 > 解决方案 > 使用 Java 中的 Javascript 函数将动态值传递给 HTML 标签

javascript - 使用 Java 中的 Javascript 函数将动态值传递给 HTML 标签

问题描述

您好 Stackoverflow 社区，过去几天我一直在努力解决以下问题。我浏览了几十个 Stack 问题、开发博客并询问了同事——但我仍然被困住了。我不得不在这里问一个问题。问题是什么？

我正在将几个 Base64 编码图像添加到 Java 中的 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 脚本的技能。

我恳请您为正确实施提供帮助，并帮助我了解我做错了什么。

当按人民币并选择“在新窗口中打开图像”时 - 右图打开并且页面不重新加载

标签： javascriptjavahtml

解决方案

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

推荐阅读