Can I load javascript code using <link> tag?
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>
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.
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.
Modern browsers support the preload keyword, which is used to preload various resources, including scripts. From MDN:
The
preloadvalue of the<link>element'srelattribute 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>
Possible rationale why not
linkelements are only allowed where "Metadata content" is allowed, typicallyhead, and not in thebody. See: Contexts in which this element can be used. All embedded elements that go in thebodyhave separate elements for them:img,iframe, etc.linkelements must be empty, andscriptmay 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:
imgcan be placed in the body, so it gets a separate element, even though it must be empty.stylecan be non-empty, so it gets a separate element, even though until HTML5 it could not be placed in thebody(now it can viascoped, but still not to include external scripts).
Apparently Tim Berners-Lee wanted everything to be done with <a: https://youtu.be/3QEoJRjxnxQ?t=901 !
JavaScript code would generally be loaded using a script tag, like so:
<script type="text/javascript" src="test.js"></script>
To answer your question directly, no. Not by that method. However I was led to this question while searching a similar issue which lead me to this question. Seeing the answers already supplied which for the most part are correct I went to check syntax on http://w3schools.com/ . It seems that with HTML5 there is a new attribute for for the script elements in html.
This new attribute allows javascript files to be defered or loaded and executed asynchronously (not to be confused with AJAX).
I'm just going to leave the link here and let you read up on the details yourself as it is already supplied on the internet.
http://www.w3schools.com/tags/att_script_async.asp
The other option for this is, you can dynamically insert a script file into the current document, by creating a SCRIPT tag, setting its "src" attribute to the URI of the script, and then inserting it as a child of the page's HEAD node.
Doing those things will get the browser to fetch the script file, load it into the document, and execute it.
Typically you would use a <script> tag, but actually, you can do <link href="test.js"></link> as you described. Here is a example
I'm wrong here. Apparently, Parcel is doing some special stuff and the final output uses a <script> tag. You need a script tag (even if you use <link> to preload a .js file, you still are forced to use a <script> tag to actually load it).
Leaving this here so that others might not be confused by Parcel's bundling magic as I was.
No. A Link tag like is for CSS files or for relational links (like next).
This is not the way to load javascript into the page. You need to use the <script> tag:
<script language="javascript" src="file.js" />
加载中,请稍侯......
精彩评论