使用Java中的Javascript函数将动态值传递给HTML标记
使用Java中的Javascript函数将动态值传递给HTML标记
提问于 2021-04-12 08:59:55
你好，Stackoverflow社区，最近几天我一直在努力解决下面的问题。我已经浏览了几十个堆栈问题，开发博客，并询问了同事们--但我还是被困住了。我不得不在这里问一个问题。有什么问题吗？
我在中添加了几个Base64编码的映像。我想打开他们在新的选项卡/弹出的全尺寸。这是代码：
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>"; 我在这里做了一些自定义格式，所以当复制(遗漏“或两个”)时，它可能不能很好地工作。
的问题是，无论我单击哪个图像，最近的一个图像都被打开，页面被重新加载，我认为必须在JS函数中添加参数，它的每一个执行都设置了正确的img源代码。不幸的是，这远远超出了我在Java中处理JS脚本的能力。
我恳请您帮助正确的实施，并帮助我理解我做错了什么。
当按下人民币并选择“新窗口中的打开图像”时-右图像打开，页面不重新加载
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-12 09:58:55
如果您遍历图像或返回多个映像，则只需将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)"
Stack Overflow用户
发布于 2021-04-12 09:37:15
页面正在重新加载，因为您使用一个链接来调用您的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>"; 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67055519
复制相关文章
相似问题
腾讯云开发者
