Can I load javascript code using tag?

Question

Can I load javascript code using <link> tag in my website ?

For example I have a javascript file, test.js, which contains the simple code alert('hello');

Can I make the popup window appear using:

<link href="test.js"></link>

bobince · Accepted Answer

No. There was a proposal to allow:

<link rel="script" href=".../script.js"/>

analogously to stylesheets. This is even quoted as an example in the HTML 4 DTD, but browser implementation never happened. Shame, as this would have been much cleaner.

Jonathon Faust · Answer

You need to use the <script> tag to include JavaScript source files:

<script type="text/javascript" src="mysrc.js"></script>

The end tag must be the full </script>, don't abbreviate the way you can with some tags as in <script type="text/javascript" src="..."/>.

Yes, alert statements in the included source will appear when they are evaluated by the browser.

For information on the uses of the <link> tag, see w3.org.

OfirD · Answer

Modern browsers support the preload keyword, which is used to preload various resources, including scripts. From MDN:

The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements.

A simple example might look like this (see our JS and CSS example source, and also 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>

Ciro Santilli 新疆再教育营六四事件法轮功郝海东 · Answer

Possible rationale why not

link elements are only allowed where "Metadata content" is allowed, typically head, and not in the body. See: Contexts in which this element can be used. All embedded elements that go in the body have separate elements for them: img, iframe, etc.
link elements must be empty, and script may be non-empty. See: Content model

Therefore it is natural to have a separate element for JavaScript, and since we must have a separate element, it is better not to duplicate functionality with link rel="script".

This theory also explains why img and style have separate elements:

img can be placed in the body, so it gets a separate element, even though it must be empty.
style can be non-empty, so it gets a separate element, even though until HTML5 it could not be placed in the body (now it can via scoped, but still not to include external scripts).

Apparently Tim Berners-Lee wanted everything to be done with <a: https://youtu.be/3QEoJRjxnxQ?t=901 !

Can I load javascript code using <link> tag?

Tags:

javascript

html

css

john terry

4 Answers

bobince

Jonathon Faust

OfirD

Ciro Santilli 新疆再教育营六四事件法轮功郝海东

Recent Activity

Donate For Us