为何自闭合脚本元素不起作用？
为何自闭合脚本元素不起作用？
技术背景
在网页开发中，HTML 和 XHTML 是常用的标记语言。自闭合标签在 XML 中是一种常见的语法，例如 <br/> 。然而，当尝试使用自闭合的脚本元素 <script /> 时，往往会遇到问题。这涉及到 HTML、XHTML 以及浏览器解析的历史和规范。
实现步骤及原理分析
HTML 4
HTML 4 基于 SGML（标准通用标记语言）。SGML 有一些短标签，但 HTML 并未重新定义类似 XML 自闭合标签的形式。在 HTML 4 中，<SCRIPT/> 理论上应表示 <SCRIPT>> ，这与 XHTML 不兼容，会破坏许多网站，所以实际上没人实现短标签，规范也不建议使用。而且 <script> 的结束标签不是被禁止的，“自结束”标签在 HTML 4 中是一种 hack，没有实际意义。
HTML 5
HTML 5 有五种类型的标签，只有“void”和“foreign”标签允许自闭合。<script> 既不是 void 标签（它可能有内容），也不是 foreign 标签（如 MathML 或 SVG），所以不能自闭合。HTML 5 旨在与 HTML 4 和 XHTML 1 的实现向后兼容，自闭合的 <script> 在不同浏览器实现中存在差异，为了保持兼容性，这个特性被拒绝。
XHTML 1 / XHTML 5
当真正以 XHTML 形式提供服务时，<script/> 是真正闭合的。但规范说 XHTML 文档可以标记为 text/html ，然而由于历史原因，IE 6 等旧浏览器不支持正确的 XHTML MIME 类型，导致大家都使用 text/html 来提供 XHTML。同时，内容嗅探存在问题，W3C 也不希望 XHTML 被嗅探，最终 Firefox 等浏览器遵循规范，仅指定文档类型不会触发 XML 解析。
核心代码示例及解析
错误示例
1 | |
在普通 HTML 中，这种自闭合写法不会按预期工作。浏览器可能会将其视为 <script src="example.js" /= "/" > ，即把斜杠当作一个空属性，脚本不会正确加载。
正确示例
1 | |
这种显式的开始和结束标签的写法是符合 HTML 和 XHTML 规范的，能确保脚本正确加载和执行。
最佳实践
- 遵循规范：在 HTML 中，使用显式的开始和结束标签
<script></script>。 - 注意 MIME 类型：如果要使用 XHTML 的自闭合语法，确保服务器发送正确的 XML MIME 类型，如
application/xhtml+xml，但要考虑旧浏览器的兼容性。 - 测试兼容性：在不同浏览器和版本中测试代码，确保脚本正常工作。
常见问题
旧浏览器不支持 XHTML
IE 8 及更早版本不支持 XHTML 解析，即使使用 XML 声明和 XHTML 文档类型，仍然会将文档解析为普通 HTML。解决方法是使用 text/html ，并遵循 HTML 的标签规则。
内容嗅探问题
内容嗅探可能导致安全问题，并且不同浏览器的行为不一致。建议遵循规范，通过 Content-Type 来确定文档类型。
自闭合标签被误解
开发者可能习惯在其他标签中使用自闭合语法，错误地应用到 <script> 标签上。要明确 <script> 标签的规范，避免使用自闭合语法。