WordPress站点访客模式下Elementor注入的含中文字符JS计算器失效

数据老陈

2026-6-27

解决Elementor HTML盒子中JS中文键访客模式失效问题

问题原因

WordPress或Elementor在访客模式下会对HTML盒子中的非ASCII字符（比如中文）进行实体转义，而登录状态下管理员权限会绕过部分内容过滤规则，导致JS对象的中文键被转成&#xxxx格式的实体编码，无法正常识别。

解决方案

方法1：用CDATA包裹JS代码

在HTML盒子的脚本代码前后添加CDATA标记，告诉解析器跳过内容转义：

<script type="text/javascript">
/* <![CDATA[ */
// 你的计算器JS代码，直接使用中文键即可
const calculatorMap = {
  '加法': (a, b) => a + b,
  '减法': (a, b) => a - b
};
// 其他计算器逻辑
/* ]]> */
</script>

方法2：动态解码实体字符

如果中文键已经被转义，可在JS中手动解码后使用：

// 解码实体编码的中文
function decodeEntity(str) {
  const textArea = document.createElement('textarea');
  textArea.innerHTML = str;
  return textArea.value;
}

// 使用解码后的字符作为键
const decodedKey = decodeEntity('&#19985;&#20133;'); // 解码为"中文"
const calculatorMap = {
  [decodedKey]: '对应功能'
};

方法3：使用外部JS文件

将计算器的JS代码保存为独立的.js文件（确保文件编码为UTF-8），然后通过以下方式引入：

直接在Elementor的「自定义代码」面板添加外部脚本引用
在主题的functions.php中注册并加载脚本：

function enqueue_calculator_script() {
  wp_enqueue_script(
    'custom-calculator',
    get_stylesheet_directory_uri() . '/js/calculator.js',
    array(),
    '1.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'enqueue_calculator_script');

外部JS文件不会被内容过滤器转义，中文键可正常使用。