TYPO3：如何将页面ID、根页面ID传入JS环境（无内联JS）

方案1：通过HTML根元素的data属性传递（推荐，最简洁） #

利用TypoScript给<html>标签添加自定义data属性，JS通过读取DOM属性获取数据，完全避免内联JS，安全且代码量极小。

TypoScript配置： #

page.htmlTag = TEXT
page.htmlTag.value = <html lang="{site:languageId}" data-page-uid="{page:uid}" data-root-page-uid="{site:rootPageUid}">
page.htmlTag.insertData = 1

JS读取方式： #

// 获取页面ID
const pageUid = document.documentElement.dataset.pageUid;
// 获取根页面ID
const rootPageUid = document.documentElement.dataset.rootPageUid;

方案2：用TypoScript生成动态外部JS文件 #

通过TypoScript创建一个动态生成的JS资源，作为外部文件引入，既满足无内联JS的要求，又能直接提供全局变量供JS使用。

TypoScript配置： #

// 创建动态JS内容
lib.pageDataJs = TEXT
lib.pageDataJs.value = window.pageContext = { pageUid: "{page:uid}", rootPageUid: "{site:rootPageUid}" };
lib.pageDataJs.insertData = 1
lib.pageDataJs.type = text/javascript

// 将动态JS作为外部文件引入到页面底部
page.includeJSFooter.pageData = FILE
page.includeJSFooter.pageData.content = <lib.pageDataJs>
page.includeJSFooter.pageData.mimeType = text/javascript

JS使用方式： #

// 直接访问全局变量
console.log(pageContext.pageUid);
console.log(pageContext.rootPageUid);

注意事项： #

• 两种方案都依赖TypoScript的insertData功能自动转义变量，避免XSS风险；
• 方案1更适合仅需读取少量页面属性的场景，方案2适合需要在多个JS文件中共享页面上下文的场景；
• 无需额外控制器或路由增强器，完全通过TypoScript实现，代码量极少。

内容的提问来源于stack exchange，提问作者peni4142