我正在尝试使用 HTML 和 JS 使用我的链接弹出一个窗口。
到目前为止，我已经设法得到这个
<a href="myLink" target="_blank" rel="noreferrer">myText</a>，但这只会使链接在新标签页中打开。
【问题讨论】：
标签： javascript html window href
当你想打开一个给定 url 的弹出窗口时，你必须使用 window.open() 函数。
windows.open() 接受一些称为窗口功能的参数，您可以在此处找到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>
【讨论】：
这是在新窗口中打开链接的方法。
<a href="myLink"
target="popup"
onclick="window.open('myLink','popup','width=600,height=600'); return false;">
Open Link in Popup
</a>
永远记住用户有时会配置他们的浏览器来阻止所有新的标签和窗口（至少我是这样做的），以避免烦人的广告和点击诱饵链接。
【讨论】：
任何打开新浏览器上下文而不指定尺寸的方法都将根据用户的偏好使用选项卡或窗口。
一般来说，尝试绕过该偏好并不是一个好主意。如果用户决定他们想要一个新窗口中的标签，他们可以随时将其撕成一个。
也就是说，如果您指定尺寸，如果浏览器完全支持（例如，大多数移动设备根本不支持窗口），它将触发一个新窗口。
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>
不幸的是，这将产生一个缺少大部分预期功能的窗口。请参阅the window.open documentation 将它们添加回来，但请注意（在 Chrome 中至少）添加菜单栏会导致高度和宽度被忽略并将内容放回新标签中。
作者控制的新窗口很痛苦，而且几乎总是最好避免。我不会碰它们，除非我需要做一些事情，比如在一个小窗口中弹出一些内容（比如聊天或音乐播放器），当用户浏览网站时，这些内容可能会保留在屏幕上……即使这样，我通常也会倾向于而是写一个 SPA。
【讨论】：