html - sirve - ¿Puedo cargar código javascript usando la etiqueta<link>?
link html to javascript (8)
¿Puedo cargar código javascript usando la etiqueta <link>
en mi sitio web?
Por ejemplo, tengo un archivo javascript, test.js
, que contiene la alert(''hello'');
código simple alert(''hello'');
¿Puedo hacer que aparezca la ventana emergente usando:
<link href="test.js"></link>
Debe usar la etiqueta <script>
para incluir los archivos de origen de JavaScript:
<script type="text/javascript" src="mysrc.js"></script>
La etiqueta final debe estar completa </script>
, no abrevie la forma en que puede hacerlo con algunas etiquetas como en <script type="text/javascript" src="..."/>
.
Sí, las declaraciones de alerta en la fuente incluida aparecerán cuando sean evaluadas por el navegador.
Para obtener información sobre los usos de la etiqueta <link>
, consulte w3.org .
El código JavaScript generalmente se cargaría usando una etiqueta de secuencia de comandos, así:
<script type="text/javascript" src="test.js"></script>
La otra opción para esto es, puede insertar dinámicamente un archivo de script en el documento actual, creando una etiqueta SCRIPT, estableciendo su atributo "src" en el URI del script, y luego insertándolo como elemento secundario del nodo HEAD de la página. .
Al hacer esas cosas, el navegador obtendrá el archivo de script, lo cargará en el documento y lo ejecutará.
Los navegadores modernos admiten la palabra clave de preload
, que se utiliza para precargar varios recursos, incluidos los scripts. Desde MDN :
El valor de
preload
del atributorel
del elemento<link>
le permite escribir solicitudes de recuperación declarativas en su<head>
HTML, especificando los recursos que sus páginas necesitarán poco después de la carga, que por lo tanto desea comenzar a precargar temprano en el ciclo de vida de un carga de la página, antes de que se active la maquinaria de representación principal del navegador. Esto garantiza que estén disponibles antes y es menos probable que bloqueen la primera representación de la página, lo que lleva a mejoras en el rendimiento.Un ejemplo simple podría verse así (vea nuestra fuente de ejemplo JS y CSS , y también en live ):
<head> <meta charset="utf-8"> <title>JS and CSS preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js"></script> </body>
No. Hubo una propuesta para permitir:
<link rel="script" href=".../script.js"/>
análogamente a las hojas de estilo. Esto incluso se cita como un ejemplo en la DTD de HTML 4 , pero la implementación del navegador nunca sucedió. Es una pena, ya que esto habría sido mucho más limpio.
No. Una etiqueta de enlace como es para archivos CSS o para enlaces relational (como el next
).
Esta no es la manera de cargar javascript en la página. Necesitas usar la etiqueta <script>
:
<script language="javascript" src="file.js" />
Para responder a su pregunta directamente, no. No por ese método. Sin embargo, fui conducido a esta pregunta mientras buscaba un problema similar que me llevó a esta pregunta. Al ver las respuestas ya proporcionadas, que en su mayor parte son correctas, fui a verificar la sintaxis en http://w3schools.com/ . Parece que con HTML5 hay un nuevo atributo para los elementos de script en html.
Este nuevo atributo permite que los archivos de javascript sean diferidos o cargados y ejecutados de forma asíncrona (no confundirse con AJAX).
Solo voy a dejar el enlace aquí y le permitiré leer los detalles usted mismo, ya que ya está disponible en Internet.
Razón posible por qué no
link
elementos delink
solo se permiten cuando se permite el "contenido de metadatos", normalmente lahead
, y no en elbody
. Ver: Contextos en los que se puede utilizar este elemento . Todos los elementos incrustados que van en elbody
tienen elementos separados para ellos:img
,iframe
, etc.link
elementos dellink
deben estar vacíos, y lascript
puede no estar vacía. Ver: modelo de contenido
Por lo tanto, es natural tener un elemento separado para JavaScript, y como debemos tener un elemento separado, es mejor no duplicar la funcionalidad con el link rel="script"
.
Esta teoría también explica por qué img
y el style
tienen elementos separados:
img
puede colocarse en el cuerpo, por lo que recibe un elemento separado, aunque debe estar vacío.style
puede ser no vacío, por lo que obtiene un elemento separado, aunque hasta HTML5 no se pudo colocar en elbody
(ahora puede hacerlo a través delscoped
, pero no incluye scripts externos).