关于Html5中嵌进外部javaScript的方法总结
前提摘要：将javaScript插入HTMl中的主要方法是使用script元素,这个元素是网景公司创造出来的，并在最早在Netscape Navigative 2中实现的，并且该元素有以下8个属性：
- async：可选，表示应该立即下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部的脚本生效
- charset：可选，使用src属性指定的代码字符集。这个属性很少使用，因为大多数的浏览器不在乎他的值
- crossorigin：可选，配置相关请求的CORS（跨源资源共享）设置。默认不适用CORS。crossorigin=“anonymous”表示配置文件请求不必设置凭据标志。crossorigin=“use-credentials”设置凭据标志，
- defer：可选，表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本生效
- integrity：可选，验证接受到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果不匹配就会报错，脚本不执行，这个属性还可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容
- language：已经废弃
- src：可选，表示包含要执行的代码的外部文件
- type：可选，这个主要替代language，表示代码块中脚本语言的内容类型（也成MIME类型）按照惯例，这个值始终是“text/javascript”。尽管“text/javascript"和”text/ecmascript"都已经废弃了，值得注意的是：type这个属性值有可能导致脚本被忽略
直接在html中嵌入javascript代码
直接在网页中放入script元素就行，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
function SayHi() {
console.log("Hi！");
}
</script>
通过这样子引进js代码，，包含在script里面的代码会被从上往下解析，值得注意，在script元素中的代码被完全计算完成之前，页面的其余内容不会被加载，也不会被显示
特别注意：不能在script里面有script的结束标志，不然网页会报错，除非加转义字符\。
<script>
function SayHi() {
console.log("<\/script>");
}
</script>
通过网页中包含的外部javascript文件
要想通过指向外部脚本文件，就需要在script元素上加多一个src，其实src的值就是一个url，可以是与网页不用域中，也可以是相同域中，如果是不同域，就要注意安全，因为恶意程序员可以随时更换代码，用法可以如下：
<script src="Demo.js"></script>
通过这样子嵌进js代码，需要注意路径的格式，应从html文件的同属等级文件开始填入路径，比如dad文件夹下有js文件夹和html文件，js文件夹下有一个index.js文件，那么在html中填写src的时候应该填“js/index.js”
或者是：
<script src="http://www/somewhere.com/afile.js"></script>
这里的结束标志可以不写，不强制，可以写成<script src="http://www/somewhere.com/afile.js">，这里有个注意点，如果指向了外部脚本文件，就不要再在script元素直接写代码了，不然浏览器只会下载并执行脚本文件，从而忽略行内代码
动态加载脚本
除了加script标签外，还有一种方法可以加载脚本，因为javascript中可以使用DOM API，所以通过向DOM中动态添加script元素同样可以加载脚本，具体来说就是创建一个script脚本并将其添加到DOM即可，如：
let script = document.createElement('script');
script.src = 'js/index.js';
document.head.appendchild(script);
但是这样子使得浏览器取消加载多个脚本时的优先级，是异步加载的，这种方式可能会严重影响性能，要想让预加载器知道这些动态请求文件的存在，可以在文件头部显式声明他们：
<link rel="preload" href="js/index.js">
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
