如何确保CFCHART JS插入到HTML <head>顶部而非底部？

问题详情 #

现有3台ColdFusion 2021（Update12，Java 11.0.21）服务器，1台为开发版，2台为标准版。两者生成页面时存在关键差异：

• 标准版中CFCHART的JS代码插入在<head>内第二个<meta>标签之后
• 开发版中这些JS代码被放在<head>标签底部

这种位置差异导致开发版页面里CFCHART JS与其他第三方JS库冲突，手动将CFCHART JS移到第二个<meta>标签后，功能可恢复正常。需要让开发版和标准版生成的页面内容保持一致。

页面结构对比 #

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
--- 标准版CFCHART JS位置 --- 
.....
大量link、meta、script标签
.....
--- 开发版CFCHART JS位置 --- 
</head>

冲突相关CFCHART JS代码 #

<script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/cf_scripts/scripts/ajax/resources/cf/images/loading.gif'/>"; _cf_contextpath=""; _cf_ajaxscriptsrc="/cf_scripts/scripts/ajax"; _cf_jsonprefix='//'; _cf_websocket_port=8584; _cf_flash_policy_port=1243; _cf_clientid='22197109ACB32E37EA4FF494B34F0074';/* ]]> */</script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/smp/swfobject.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/jquery/jquery.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/cfchart-lite.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/cfchart-html.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/cfchart.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/license.js"></script>

修复方案 #

临时应急修复 #

直接修改页面渲染后的HTML代码，把开发版中位于<head>底部的CFCHART相关JS代码剪切到第二个<meta>标签之后，可快速解决冲突问题。

持久化解决方法 #

1. 调整ColdFusion配置

进入ColdFusion安装目录下的WEB-INF/cfusion/lib/charting文件夹，检查cfchart.properties或类似配置文件，查找控制JS注入位置的参数，将其设置为与标准版一致的规则。修改完成后重启ColdFusion服务生效。

2. 自定义CFML拦截器

如果配置文件中无相关参数，可通过自定义拦截器在页面渲染阶段调整JS插入位置。示例代码如下：

<cfcomponent extends="coldfusion.interceptor.Interceptor">
    <cffunction name="preRender">
        <cfargument name="event" type="coldfusion.event.Event" required="true">
        <cfset var pageContext = event.getPageContext()>
        <cfset var headContent = pageContext.getResponse().getHeader("X-CF-Head-Content")>
        
        <!--- 匹配所有CFCHART相关的JS代码 --->
        <cfset var cfchartScripts = reMatch(
            '<script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml.*?</script>|<script type="text/javascript" src="/cf_scripts/scripts/(ajax|chart)/.*?</script>',
            headContent
        )>
        
        <!--- 移除原位置的CFCHART JS --->
        <cfset headContent = reReplace(
            headContent,
            '<script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml.*?</script>|<script type="text/javascript" src="/cf_scripts/scripts/(ajax|chart)/.*?</script>',
            '',
            'all'
        )>
        
        <!--- 将CFCHART JS插入到第二个meta标签之后 --->
        <cfset headContent = reReplace(
            headContent,
            '(<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">)',
            '$1' & arrayToList(cfchartScripts, ''),
            'one'
        )>
        
        <!--- 更新页面head内容 --->
        <cfset pageContext.getResponse().setHeader("X-CF-Head-Content", headContent)>
    </cffunction>
</cfcomponent>

写完拦截器后，在ColdFusion管理员的「服务器设置 > 拦截器」中注册并启用该拦截器，重启服务即可生效。

3. 检查官方补丁

查看Adobe ColdFusion官方支持渠道，确认是否有针对Update12的补丁，修复开发版与标准版CFCHART JS注入位置不一致的问题。若有，直接安装补丁即可从根源解决问题。

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