javascript - tab - img html

Abrir un enlace en una nueva pestaña

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo abrir el enlace en una nueva pestaña en html? 11 respuestas

Creé un sitio web para un proyecto que estoy haciendo. En el contenido del sitio web hay algunos enlaces para páginas web externas que se pueden visitar. Mientras tanto, cuando el usuario haga clic en uno de los enlaces, se lo dirigirá al enlace especificado y ya no estará en la página actual. Lo que quería hacer es hacer que el sitio web especificado en el enlace al que se hizo clic aparezca en una nueva pestaña cuando el usuario hace clic en el vínculo. De esta manera, el usuario permanece en la página actual que él es uno y también puede ver la otra página en la nueva pestaña.

Miré en Internet y encontré esto que me pareció útil:

function externalLinks()
{
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++)
  {
      var anchor = anchors[i];
      if(anchor.getAttribute("href"))
        anchor.target = "_blank";
  }
}
window.onload = externalLinks;

El problema que estoy enfrentando es que la barra de navegación de mi sitio web contiene etiquetas de anclaje. Entonces, si el usuario hace clic en los enlaces en la barra de navegación, se abrirá una nueva pestaña. Quiero que esto suceda SOLO si el usuario hace clic en un enlace en el contenido de mi sitio web. Entonces, si el usuario hace clic en un enlace en la barra de navegación, no debería abrir una nueva pestaña y solo debería llevarlo al destino especificado.

Intenté agregar una clase a todos los enlaces del contenido y usar getElementByClassName, pero todavía no funcionaba

Cualquiera me puede ayudar con esto

Answer 1

¿Estás obligado a utilizar javascript para esto?

De lo contrario, podría agregar el atributo directamente a la etiqueta a en el HTML.

Por ejemplo: <a href="http://www.google.co.uk" target="_blank">Google</a>

Esa sería una forma más fácil de hacerlo si no se requiere JavaScript.

Answer 2

Desea usar document.getElementById("theidgoeshere");

Para hacer esto, establezca el atributo id en su enlace así:

<a href="www.google.com" id="theidgoeshere">Google</a>

Luego en tu javascript

  var anchor = document.getElementById("theidgoeshere");
  if(anchor.getAttribute("href"))
      anchor.target = "_blank";

También tenga en cuenta que es posible que desee prescindir de javascript. Simplemente ponga target="_blank" en su etiqueta de anclaje.

Answer 3

Puedes usar HTML:

<a target="_blank" href="YourAmazingURL">Click here for Amazing URL</a>

Otro ejemplo:

<a target="_blank" href="http://www.google.com/">Google</a>

Esto aprovecha el atributo de destino.

Más información sobre el atributo de destino: http://www.w3schools.com/tags/att_a_target.asp También: http://www.w3schools.com/html/html_links.asp

EDITAR:

Para XHTML, solo haz esto:

<a href="YourAmazingURL" onclick="window.open(this.href,''_blank'');return false;">Click here for Amazing URL</a>

O, de nuevo:

<a href="http://www.google.com/" onclick="window.open(this.href,''_blank'');return false;">Google</a>

Answer 4

Si necesita confiar en JavaScript:

Básicamente, solo necesita cambiar su condición if (para verificar si el enlace de anclaje apunta a una ubicación externa o no).

Entonces, en lugar de if(anchor.getAttribute("href")) , use if(anchor.getAttribute("href") && anchor.hostname!==location.hostname) .

Con un poco de limpieza de código, su función debería verse de la siguiente manera:

function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
  }
}
;
externalLinks();