JS abre una nueva pestaña, lo que hace que el acceso a su sitio web sea más conveniente

prefacio

Cuando navega por la web, a menudo necesita abrir un enlace en una nueva pestaña para ver otro contenido sin salir de la página actual. Entre ellos, JS para abrir una nueva página de pestañas es una de las funciones más utilizadas, que no solo puede facilitar a los usuarios el acceso rápido a enlaces relacionados, sino que también mejora de manera efectiva la experiencia del usuario del sitio web. En este artículo, presentaré cómo usar JS para abrir una nueva pestaña y discutiré algunas tecnologías y precauciones relacionadas.

---

1. Reemplace la nueva URL con registros históricos y puede retroceder

ventana.ubicación.asignar(URL)

assign()El método se utiliza para cargar un nuevo documento.

ejemplo de código

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    loadOn() {
      
      
      window.location.assign("https://www.csdn.net/");
    },
  },
};
</script>

lograr efecto

---

ventana.ubicación.href = “URL”

location.hrefes un atributo que se utiliza para cambiar urlla dirección .

ejemplo de código

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    loadOn() {
      
      
      window.location.href = "https://www.csdn.net/";
    },
  },
};
</script>

lograr efecto

---

ubicación.assign(“URL”)

ejemplo de código

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    loadOn() {
      
      
      location.assign("https://www.csdn.net/");
    },
  },
};
</script>

lograr efecto

---

2. Reemplace la nueva URL, no hay registro histórico y no puede retroceder

ubicación.reemplazar(URL)

replace()método para reemplazar el documento actual con un nuevo documento. replace()Después de que el método salta, no se puede hacer clic en el botón Atrás del navegador, porque el actual replaceen realidad urlreemplaza en lugar de saltar, y el registro no se guardará.

ejemplo de código

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    loadOn() {
      
      
      location.replace("https://www.csdn.net/");
    },
  },
};
</script>

lograr efecto

---

3. Crea una nueva pestaña para abrir la URL

window.open(URL,nombre,especificaciones,reemplazar)

open()El método se utiliza para abrir una nueva ventana del navegador o encontrar una ventana con nombre.

Parámetros del método window.open()

URL:

opcional. Abre la página especificada URL. Si no se especifica URL, abre una nueva ventana en blanco.

nombre:

opcional. Especifica targetla propiedad o el nombre de la ventana. Se admiten los siguientes valores:

• _blank - URLCarga en una nueva ventana. este es el valor predeterminado
• _parent - URLcargado en el marco principal
• _self - URLreemplazar la página actual
• _top - URLReemplace cualquier conjunto de marcos cargables
• name -nombre de la ventana

especificaciones:

opcional. Una lista de elementos separados por comas. Se admiten los siguientes valores:

• channelmode=yes|no|1|0Ya sea para mostrar en modo teatro window. El valor predeterminado es ninguno. Solo Internet Explorer
• directories=yes|no|1|0Ya sea para agregar un botón de directorio. El valor predeterminado es sí. solo IEnavegador
• fullscreen=yes|no|1|0Si el navegador muestra el modo de pantalla completa. El valor predeterminado es ninguno. En el modo de pantalla completa window, también debe estar en modo teatro. solo IEnavegador
• height=pixelsLa altura de la ventana. El valor mínimo es 100
• left=pixelsla posición izquierda de la ventana
• location=yes|no|1|0Ya sea para mostrar el campo de dirección, el valor predeterminado esyes
• menubar=yes|no|1|0Ya sea para mostrar la barra de menú, el valor predeterminado esyes
• resizable=yes|no|1|0Si el tamaño de la ventana se puede ajustar, el valor predeterminado esyes
• scrollbars=yes|no|1|0Ya sea para mostrar la barra de desplazamiento, el valor predeterminado esyes
• status=yes|no|1|0Ya sea para agregar una barra de estado, el valor predeterminado esyes
• titlebar=yes|no|1|0Ya sea para mostrar la barra de título, ignorada a menos que HTMLla aplicación de llamada o un diálogo de confianza, el valor predeterminado esyes
• toolbar=yes|no|1|0Si mostrar la barra de herramientas del navegador. El valor predeterminado esyes
• top=pixelsPosición en la parte superior de la ventana, solo IEnavegadores
• width=pixelsEl ancho de la ventana, el valor mínimo es 100

reemplazar:

Optional.SpecifiesEspecifica URLsi crea una nueva entrada en el historial de exploración de la ventana o reemplaza la entrada actual en el historial de exploración. Se admiten los siguientes valores:

• true - URLReemplazar la entrada actual en el historial de navegación
• false - URLCrear nuevas entradas en el historial de navegación

ejemplo de código

<template>
  <div>
    <button @click="loadOn">载入新文档</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    loadOn() {
      
      
      window.open("https://www.csdn.net/");
    },
  },
};
</script>

lograr efecto

---

abrir enlace de blob

window.open(URL, '_blank'))