Question

我正在尝试使用HTML和JS使链接弹出窗口。

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

Answer 1

这是在新窗口中打开链接的方法。

var viewport = $('.frame');
var $pz = $('.panzoom');
$pz.panzoom({
  minScale: .8,
  maxScale: 3,
  onPan: function() {
    //  console.log('pan');
  },
  onStart: function(event) {
    //  console.log('start', event);
    return true;
  },
});

$('.item').draggable({
  helper: 'clone',
  appendTo: '.workspace',
  zIndex: 100505,
  stop: function(event, ui) {
    event.target.remove();
  },
});

永远记住，有时用户会配置其浏览器来阻止所有新的选项卡和窗口（至少这是我要做的），以避免引起讨厌的广告并单击诱饵链接。

Answer 2

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

通常，尝试绕过该偏好不是一个好主意。如果用户决定在新窗口中使用标签，则可以随时将其拆分为一个标签。

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

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 中）添加菜单栏将导致高度和宽度被忽略，并将其放回到新标签中。 / p>

作者控制的新窗口很痛苦，几乎总是最好避免使用。除非我需要在一个小窗口中弹出某些内容（例如聊天或音乐播放器），然后在用户浏览网站时将其保留在屏幕上，否则我不会触摸它们的……甚至我通常都会倾向于改写SPA。

Answer 3

要使用给定的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>

如何在新窗口中打开链接？

3 个答案: