html/javascript：隐藏链接目标并在新标签中打开链接

问题描述：

我使用以下javascript（由m59在this上一个答案中提供）来隐藏链接的目标，该链接通常显示在浏览器窗口的底部悬停在一个链接上：html/javascript：隐藏链接目标并在新标签中打开链接

<div> 
    <a data-href="http://www.google.com/"> LINK </a> 

    <script type="text/javascript"> 
     var anchors = document.querySelectorAll('a[data-href]'); 

     for (var i=0; i<anchors.length; ++i) { 
      var anchor = anchors[i]; 
      var href = anchor.getAttribute('data-href'); 
      anchor.addEventListener('click', function() { 
      window.location = href; 
      }); 
     } 
    </script> 
</div>

这工作得很好，但我想链接打开一个新标签以及。我该如何改变脚本才能做到这一点？

我尝试使用window.open('href','_blank');而不是window.location = href;哪些不起作用。

可以在这个类似的帖子上找到答案：https：//stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using- javascript –

您可以在链接上使用按钮元素。 – Anthony

我很想知道为什么你必须尝试隐藏用户的URL。 – BoffinbraiN

答

除非即时失去了一些东西，最明显的事情是目标添加到锚：

<a data-href="http://www.google.com/" target="blank"> LINK </a>

答

为什么不直接使用一个onclick事件处理程序将用户重定向？

<a href="" onclick="onClick">link</a> 

function onClick(e) { 
    e.preventDefault(); 
    document.location.href='www.google.ca'; 
}

问题不在于'addEventListener'，而是'document.location = ...'，因为这不会在新选项卡中打开链接，并且您的答案也无法解决此问题。使用内联事件监听器是你永远不应该做的事情。 –

你说得对，我忘记了关于打开新标签的部分。我想知道更多关于你称之为“内联事件监听器”的内容，以及它们为什么是不好的做法。你能否给我提供一个解释这些事情的文档的链接？ @ t.niese –

我现在没有链接。一般来说，您应该始终保持css，html和js分开维护的原因。在较大的js项目中，您可能需要使用检查未使用的函数和变量的linting工具，并且您可能希望应用缩小和优化脚本。这些脚本没有看到html标签内部的代码，因此linter不会看到使用此函数，缩小脚本可能会破坏您的代码，因为它缩短了函数名称。从html标签调用的函数需要在全局范围内可见，这也可能导致冲突。 –

答

这是如何做到这一点（尝试在你的代码，计算器块新的标签和链接）

var anchors = document.querySelectorAll('a[data-href]'); 
 

 
     for (var i=0; i<anchors.length; ++i) { 
 
      var anchor = anchors[i]; 
 
      var href = anchor.getAttribute('data-href'); 
 
      anchor.addEventListener('click', function() { 
 
      window.open(href,'',''); 
 
      }); 
 
     }

<div> 
 
    <a data-href="http://www.google.com/"> LINK </a> 
 

 
</div>

答

可以看到here，窗口的这种语法。打开：

var window = window.open(url, windowName, [windowFeatures]);

因此，要打开新的标签页的链接，你应该使用类似：

var myNewTab = window.open(url, '_blank');

如果窗口被打开，“_blank”

答

你尝试window.open(href)这将无法正常工作？

即在你的例子中，href是一个字符串（有单引号），而不是变量。

html/javascript：隐藏链接目标并在新标签中打开链接

相关推荐