我可以使用 CSS 或 JavaScript 在新的全尺寸窗口中打开缩略图吗？答案

【问题标题】：Can I open a thumbnail image in a new full-sized window using CSS or JavaScript?我可以使用 CSS 或 JavaScript 在新的全尺寸窗口中打开缩略图吗？
【发布时间】：2020-12-20 17:12:22
【问题描述】：

我正在使用一个应用程序 (WebWorks 2020.1)，该应用程序在发布到 DHTML 时会从我的 FrameMaker 源输入自动生成 <img> 标记。我无法直接编辑 HTML <img> 或 <a> 标记，只能编辑附加样式表中的 HTML 页面 ASP 模板和 CSS 类。这是生成的带有周围代码的图像的输出：

<div class="picture">
   <a name="628774">
      <img class="Anchored_Frame" src="images/CreateWarehouse_thumb_7.png" style="display: inline; left: 0.0pt; max-height: 51px; max-width: 400px; top: 0.0pt" alt="" title="" usemap="#uGbGKlB3y6o_625462" width="100%" border="0">
         <map name="uGbGKlB3y6o_625462"><area coords="0,0,400,51" shape="rect" href="images/CreateWarehouse_7.html" alt="" title=""></map>
   </a>
</div>

DHTML 输出将与 Web 应用程序集成，该应用程序在显示的产品页面内的 450 像素宽的窗格中打开上下文相关帮助。图像在 DHTML 页面中显示为 400 像素的缩略图，如上面的代码所示。

我已经能够实现点击时打开图片，但它在相同浏览器窗口（帮助窗格）中打开，限制为450像素，因此无法展开图片. （图像响应并随着浏览器窗口的放大而变大，但这在 450 像素窗格中是不可能的。）当用户单击图像时，我希望它打开一个新的、完整的-大小的浏览器窗口或标签。

我可以在页面模板中添加一个 JS 脚本。我可以添加/编辑 CSS 样式，例如 img.Anchored_Frame。 有没有办法仅使用 CSS 或 JavaScript 在新的全尺寸浏览器选项卡或窗口中打开缩略图？请注意，我无法直接编辑 <a> 或 <img> 标记。感谢您对新手的帮助。

【问题讨论】：

标签： javascript html css image

【解决方案1】：

如果您得到的结构与您在问题中显示的所有图像相同：

<div class="picture">
  <a name="">
    <img>
    <map>
  </a>
</div>

这应该可行：

var images = document.getElementsByClassName('picture')

for(var i = 0 ; i < images.length; i++){ 
images[i].childNodes[1].childNodes[3].setAttribute("target", "_blank");
}

这个想法是添加到<map> target="_blank"

【讨论】：

谢谢，埃尔纳坦。我把这个放在page.asp中<head>：<script type="text/javascript" src="scripts/imgwindow2.js"></script>下面是imgwindow2.js的内容：var images = document.getElementsByClassName('picture') for(var i = 0 ; i < images.length; i++){ images[i].childNodes[1].childNodes[3].setAttribute("target", "_blank"); } （续...）
这是已发布的输出。 <map>、<div> 和 <img> 不受影响。图片仍然在同一窗口中打开：```

```
你能不能试着把代码放在</body>上面看看它是否有效，如果你在控制台中遇到任何错误，请告诉我