如何在新的window中打开一个link？

Question

我正在尝试使用 HTML 和 JS 用我的 link 制作一个 window 弹出窗口。

到目前为止我已经设法得到这个 <a href="myLink" target="_blank" rel="noreferrer">myText</a>，但这只会让 link 在新标签页中打开。

Answer 1

这是在新 window 中打开 link 的方法。

<a href="myLink" 
 target="popup" 
 onclick="window.open('myLink','popup','width=600,height=600'); return false;">
   Open Link in Popup
</a>

永远记住有时用户将他们的浏览器配置为阻止所有新标签和 windows（至少我是这样做的），以避免烦人的广告和点击诱饵 links。

Answer 2

任何在不指定尺寸的情况下打开新浏览器上下文的方法都将根据用户的偏好使用选项卡或 window。

一般来说，尝试绕过该首选项并不是一个好主意。如果用户决定他们想要一个新的选项卡 window，他们可以随时将其撕成一个。

就是说，如果您指定尺寸，如果浏览器完全支持它，它将触发一个新的 window（例如，大多数移动设备根本不支持 windows） .

addEventListener("click", event => {
    const target = event.target;
    if (!target.classList.contains("force-window")) {
        return;
    }
    const url = target.href;
    const width = window.innerWidth;
    const height = window.innerHeight;
    const features = `width=${width},height=${height}`;
    window.open(url, "_blank", features);
    event.preventDefault();
});

<a href="myLink" target="_blank" rel="noreferrer" class="force-window">myText</a>

不幸的是，这将导致 window 缺少大部分预期功能。请参阅 the window.open documentation 将它们添加回去，但请注意（在 Chrome 至少中）将菜单栏添加回去会导致高度和宽度被忽略并放东西回到新标签页。

作者控制的新 windows 是一种痛苦，几乎总是最好避免。我不会碰它们，除非我需要做一些事情，比如在一个小的 window 中弹出一些内容（比如聊天或音乐播放器），当用户浏览网站时，这些内容可以保留在屏幕上……即使那样我d 通常倾向于编写 SPA。

Answer 3

当你想用给定的 url 打开一个弹出窗口时，你必须使用 window.open() 函数。

windows.open() 接受一些称为 Window 功能的参数，您可以在此处找到 https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features，以定义弹出窗口。当您传递 width 和 height 时，它将在弹出窗口中打开。

<a id="url" href="https://www.google.com">myText</a>

<script>
  document.getElementById("url").addEventListener('click', evt => {
    evt.preventDefault();
    let elem = document.getElementById("url");
    let url = elem.getAttribute("href");
    window.open(url, "popup", "width=700,height=700");
  });
</script>

如何在新的window中打开一个link？

How to open a link in a new window?

html

javascript

window

href