您现在的位置是：网站首页 > <script>-客户端脚本文章详情
<script>-客户端脚本
陈川
【
HTML
】
8107人已围观
3644字
<script> 标签是 HTML 中用于嵌入或引用客户端脚本的核心元素，通常用于实现动态交互、数据验证或操作 DOM。它支持多种属性，可直接写入代码或链接外部脚本文件，是现代 Web 开发不可或缺的部分。
<script> 标签的基本语法
<script> 标签的语法非常简单，以下是一个基础示例：
<script>
console.log("Hello, World!");
</script>
它可以直接包含 JavaScript 代码，浏览器在解析到该标签时会立即执行其中的内容。如果引用外部文件，则使用 src 属性：
<script src="app.js"></script>
属性详解
<script> 标签支持多个属性，用于控制脚本的加载和执行行为。
src 属性
src 用于指定外部脚本文件的路径，可以是相对路径或绝对 URL：
<script src="https://example.com/app.js"></script>
type 属性
早期 HTML 版本中，type 属性用于指定脚本的 MIME 类型（如 text/javascript），但在 HTML5 中已成为可选，默认值为 text/javascript。现代开发中通常省略：
<script type="text/javascript">
// 传统写法，现在可不写
</script>
async 和 defer 属性
这两个属性用于控制脚本的加载和执行顺序：
-
async：脚本异步加载，下载完成后立即执行，不保证顺序。<script src="script1.js" async></script> <script src="script2.js" async></script>script2.js可能先于script1.js执行。 -
defer：脚本延迟到文档解析完成后按顺序执行。<script src="script1.js" defer></script> <script src="script2.js" defer></script>保证
script1.js先于script2.js执行。
crossorigin 属性
用于控制跨域请求的凭据模式，常见于 CDN 资源加载：
<script src="https://another-domain.com/app.js" crossorigin="anonymous"></script>
内联脚本与外部脚本
内联脚本
直接写在 HTML 文件中的脚本：
<script>
document.getElementById("demo").innerHTML = "内容已修改";
</script>
外部脚本
通过 src 引入的独立 .js 文件：
<script src="scripts/main.js"></script>
外部脚本的优势：
- 可缓存，提升加载速度。
- 代码复用性强。
- 便于维护和版本控制。
动态加载脚本
通过 JavaScript 动态创建 <script> 标签：
const script = document.createElement('script');
script.src = 'dynamic.js';
document.body.appendChild(script);
这种方式常用于按需加载模块或第三方库。
事件处理
<script> 标签支持 onload 和 onerror 事件：
<script src="app.js" onload="console.log('加载成功')" onerror="console.log('加载失败')"></script>
模块化脚本
使用 type="module" 支持 ES6 模块：
<script type="module">
import { func } from './module.js';
func();
</script>
模块脚本默认启用严格模式，且支持 import/export 语法。
性能优化建议
-
将脚本放在
<body>底部：避免阻塞页面渲染。<body> <!-- 页面内容 --> <script src="app.js"></script> </body> -
合并脚本文件：减少 HTTP 请求次数。
-
使用
defer或async：根据场景选择合适的加载策略。
兼容性与历史问题
- 早期浏览器可能不支持某些新特性（如
defer/async），需测试降级方案。 - XHTML 中需将脚本内容包裹在 CDATA 中：
<script type="text/javascript"> //<![CDATA[ alert("Hello"); //]]> </script>
实际应用示例
表单验证
<script>
function validateForm() {
const email = document.getElementById("email").value;
if (!email.includes("@")) {
alert("邮箱格式错误");
return false;
}
return true;
}
</script>
<form onsubmit="return validateForm()">
<input type="text" id="email" required>
<button type="submit">提交</button>
</form>
动态内容加载
// 加载天气数据并显示
fetch('https://api.weather.com/data')
.then(response => response.json())
.then(data => {
document.getElementById('weather').innerHTML = data.temperature;
});
安全注意事项
- 避免内联脚本中的敏感信息：如 API 密钥。
- 使用 CSP（内容安全策略）：限制脚本来源：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'"> - 警惕 XSS 攻击：不要直接插入未处理的用户输入：
// 错误示例 document.write(userInput);
与其他技术的结合
配合 noscript 标签
为禁用脚本的用户提供备用内容：
<noscript>
<p>请启用 JavaScript 以获得完整功能</p>
</noscript>
Web Workers
通过脚本创建后台线程：
// main.js
const worker = new Worker('worker.js');
worker.postMessage('Start');
// worker.js
onmessage = function(e) {
console.log('Worker received:', e.data);
};
上一篇： <slot>-Web组件插槽
下一篇： <iframe>-内联框架
