javascript - 使用 javascript 将目标 ="blank"添加到链接

Question

我正在尝试添加 target="_blank"根据复选框点击到页面上的链接。

在 javascript 方面，我有:

 function newTab(v) {
      if(v.tab.checked == true) { 
        document.getElementsByTagName('a').setAttribute('target', '_blank');
      } else {
        document.getElementsByTagName('a').setAttribute('target', '_self');
      }
  } //end function

在 HTML 端我有:

<form>
    <input type="checkbox" name="tab" onclick="newTab(this.form)" />
    <label>Open Links In New Tab?</label>
</form>

<a href="//mail.google.com">Gmail</a>

自然没有我想的那么简单，所以不行。

该页面包含十几个链接，因此我需要将复选框应用到页面上的所有链接 - 为什么我使用 getElementsByTagName() .任何帮助表示赞赏!

编辑:

有效代码如下:

  function newTab(f) {
    var els = document.getElementsByTagName('a'); //read anchor elements into variable
    if(f.tab.checked == true) { //If the box is checked.
      for (var i in els) {
        els[i].setAttribute('target', '_blank'); //Add 'target="blank"' to the HTML
      } 
    } else { // not checked...
      for (var i in els) {
        els[i].setAttribute('target', '_self'); //Add 'target="self" to HTML
      }
    }
  } //end function. 

Answer 1

getElementsByTagName() 返回一个节点集。您需要对其进行迭代并依次将更改应用于每个。您目前拥有的更像是 jQuery 语法，它会在内部为您处理此问题。

这会显示在控制台中。对于 JS 问题，总是先检查控制台再想知道哪里出了问题。

var els = document.getElementsByTagName('p');
for (var i=0, len = els.length; i<len; i++)
    els[i].setAttribute('name', 'value');

此外，对于复选框使用更改，而不是单击事件，因为有人可能通过键盘而不是鼠标来切换它们。最后，您应该考虑集中处理您的事件，而不是在 HTML 中指定的内联 DOM 零事件。许多原因超出了这个问题的范围。