HTML 在图像 onclick 上再次打开全新窗口

Question

尝试不同的选项，例如我在新窗口中打开页面，下面在新选项卡中打开

 <a href="imageurl" target="_blank">
        <img src="imageurl" style="width: 50%; height: 220px;">
  </a>

下面覆盖当前窗口

<img src="imageurl" style="width: 50%; height: 220px;" onclick="window.open(this.src)">

希望再次在新窗口中打开。请建议

Answer 1

要触发新窗口而不是新选项卡（您通常不愿意这样做），您需要指定一些浏览器不会应用于选项卡的窗口功能。

在Chrome中设置resizable就足够了。我没有在其他浏览器中测试过。

HTML：

<a href="http://placekitten.com/100/100" target="_blank">
  <img src="http://placekitten.com/100/100">
</a>

JS：

const openInNewWindow = event => {
  event.preventDefault();
  const {href, target} = event.currentTarget;
  const features = "resizable";
  window.open(href, target, features);
};


document.querySelector("a")
  .addEventListener("click", openInNewWindow);

（不要将单击事件侦听器绑定到图像，它们不是设计为交互式控件的。依赖（例如）屏幕阅读器或键盘焦点与文档交互的用户会发现很难或不可能触发单击在图像上。使用语义标记。如果要链接某些内容，请使用链接，然后使用 JS 进行增强。）