时间戳

首页 > 解决方案 > HTML在图像onclick上再次打开新窗口

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

问题描述

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

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

期待再次在新窗口中打开。请建议

标签： javascripthtmlimage

解决方案

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

在 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 进行增强。）

推荐阅读