在新选项卡中打开特定 <form> 或 <div> 的链接答案

【问题标题】：Open links from a specifc <form> or <div> in new tab在新选项卡中打开特定 <form> 或 <div> 的链接
【发布时间】：2020-05-15 22:54:28
【问题描述】：

是否可以在新标签中打开<form> 或<div> 中的所有链接？我知道有target="_blank"，但是否有可能对所有链接都这样做？

【问题讨论】：

标签： html

【解决方案1】：

您可以编写一个简单的脚本来执行此操作。以编程方式获取所有锚标记，迭代并将目标设置为空白。

 <script>
  var elements = document.getElementsByTagName("a");
  for (let item of elements) {
    item.setAttribute("target", "_blank")
  }
 </script>

【讨论】：

是的，但只能在特定的表单或 div 内？
var elements = document.querySelectorAll("#myId a"); for (let item of elements) { item.setAttribute("target", "_blank") } 其中 myId 是您的 div 或表单的 id

【解决方案2】：

不幸的是，没有本地方法可以做到这一点。但是，我们可以通过一些简单的 jQuery/js 应用我们自己的逻辑

^{注意由于allow-popups 权限，StackOverflow 的沙箱不允许在 sn-ps 中弹出窗口}

jQuery：

// For each <a> inside a <form>
$('form a').each(function (i, el) {

  // Set target=_blank
  $(el).attr("target","_blank");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <a href="https://google.com">Google</a>
  <a href="https://twitter.com">Twitter</a>
</form>

// All <forms>
var forms = document.getElementsByTagName('form');
Array.prototype.slice.call(forms).forEach(function (form) {
  
  // All <a>
  var links = form.getElementsByTagName('a');
  Array.prototype.slice.call(links).forEach(function (link) {
  
      // Set target=_blank
      link.setAttribute("target", "_blank")
  })
});

<form>
  <a href="https://google.com">Google</a>
  <a href="https://twitter.com">Twitter</a>
</form>

您可以通过将硬 form 或 getElementsByTagName('form') 更改为更具体的内容来自定义上述内容，例如类选择器，甚至可能是 id。

通过 CSS 应用 target=_blank 很简单，但它是 doesn't seem implemented yet。

【讨论】：