移动体验 / 方法解读

移动端 script 标签为何不能包含 phrasing content

script 标签的内容模型是脚本数据,而非 phrasing content,因此无法包含段落文本等短语内容。

HTML代码示例,展示仿小米官网右侧浮动框的代码片段
主题资料配图,非新闻现场照片 · 配图:html实战篇:html仿小米官网右侧浮动框代码

检查 script 标签的内容模型定义

根据 HTML 规范,script 标签属于 script-supporting 元素,其内容模型被定义为脚本数据。这意味着浏览器在解析 script 标签时,会将其内部内容视为原始文本或代码,而不是可渲染的文档内容。因此,script 标签不能包含 phrasing content,如文本节点或段落元素,因为 phrasing content 是用于构建文档文本和标记的类别。

要验证这一点,可以在 script 标签内尝试放置文本内容,例如 console.log('测试')。如果浏览器控制台输出了 '测试',说明文本被当作脚本代码处理,而非文档内容。这证实了 script 标签的内容模型排除了 phrasing content,任何试图在其中放置段落或文本的行为都会被忽略或导致脚本执行错误。

确认 script 标签在文档结构中的位置与类别

script 标签虽然属于 metadata content、flow content 和 phrasing content 等多个类别,但其内容模型是脚本数据。这意味着它可以在文档中作为 metadata、flow 或 phrasing 内容使用,但内部不能包含 phrasing content。例如,script 标签可以放在 body 中作为 flow 内容,或放在 head 中作为 metadata 内容,但其内部内容必须符合脚本数据的规则。

检查时需确认 script 标签的位置和属性设置是否符合规范。例如,script 标签不应嵌套在 div 等流内容元素内部,除非该元素允许脚本支持元素。同时,确保 script 标签的 type 属性设置为 JavaScript 类型,否则内容会被视为模板数据或 JSON 数据,而非可执行的脚本代码。

排查 script 标签内嵌套 phrasing content 的错误写法

如果在 script 标签内嵌套了 phrasing content,例如段落或文本节点,浏览器会将其视为脚本代码的一部分,导致解析错误或显示异常。例如,在 script 标签内放置 <p>段落</p> 会被当作字符串输出,而不是渲染为文档内容。检查时需确认 script 标签内没有混用 phrasing content,以免造成脚本执行失败或文档渲染错误。

修复时,应将 phrasing content 移至 script 标签外部,或使用 JavaScript 的注释语法,例如 // 这是单行注释 或 /* 这是多行注释 */。这些语法是 JavaScript 语言的一部分,会被 JavaScript 引擎正确解析,而不会干扰文档内容的渲染。

验证修复后的脚本执行与文档结构正确性

修复 script 标签内嵌套 phrasing content 的问题后,应验证脚本的执行效果和文档结构的正确性。首先,确保 script 标签内的 JavaScript 代码能够正确执行,例如通过 console.log 输出预期结果。其次,检查页面是否按预期渲染,没有因内容模型错误导致的布局错乱或内容显示异常。

若问题依然存在,可进一步检查 script 标签的 type 属性是否设置为非 JavaScript 类型,例如 type='text/template' 或 type='application/json'。这些类型会将内容视为模板数据或 JSON 数据,而不会执行脚本。检查时需确认 type 属性设置正确,以避免脚本被误判为其他类型。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Content categories - HTML | MDN ↗
  2. 配图:html实战篇:html仿小米官网右侧浮动框代码 ↗
← 更多移动体验文章返回顶部 ↑