Question

我的链接是显示加载程序的javascript函数，然后导航到目标链接：

<script>
function go(url) {
  document.body.innerHTML = "some loader html";
  window.location = url;
}
</script>
<a href="javascript:go('test.php');">Click here</a>

但是，当用户右键单击该链接并想要导航到新标签中的test.php时，此链接将不起作用。

当用户要在新标签页/窗口中打开链接时，我希望该链接也起作用。我可以使用javascript / jquery方法来实现这一点吗？

谢谢

Answer 1

您的链接应该是链接，而不是JavaScript函数。他们的主要目的是导航。您可以稍后在点击处理程序中添加其他行为：

document.body.addEventListener('click', evt => {
  const link = evt.target.closest('a.use-loader');
  if (!link) return;
  evt.preventDefault();
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = link.href;
});

<a href="https://example.com" class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example.org" class="use-loader">This one, too.</a>

或使用jQuery：

$('body').on('click', 'a.use-loader', function () {
  document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
  window.location.href = $(this).attr('href');
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com" class="use-loader">
  This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
<a href="https://example.org" class="use-loader">This one, too.</a>

通过这种方式，这些链接仍可用于任何未运行JavaScript的代理，包括打开新标签的浏览器和运行NoScript的用户。

Answer 2

首先，“我的链接是显示加载程序的javascript函数，然后导航到目标链接”听起来像是糟糕的设计决策。

要回答您的问题... window.open('test.php', '_blank');

第二个参数将是目标窗口的名称参见How to simulate target="_blank" in JavaScript

右键单击“在新窗口中打开”的唯一方法是使标签像这样

<a href="javascript:go('test.php');" target="_blank">Click here</a>

我强烈建议您不要使用javascript打开链接，这通常是错误的做法，您很可能会遇到弹出窗口阻止程序问题。我会亲自做

<a href="test" target="_blank">Click here</a>

也许您想要显示的“加载程序”应该模仿AJAX加载方法，在该方法中，您可以加载新的HTML并将其插入到页面中，而不会导致实际的页面重新加载

您可能对此感兴趣 How do I load the ajax data into a div with jquery?

右键单击启用“在新标签页/窗口中打开”

2 个答案: