关于调整Google WCM脚本实现页面电话号码替换的技术咨询

你的修改后的方案无法正常实现电话号码替换功能，核心原因很简单：你移除了触发号码替换逻辑的关键调用——_googWcmGet函数现在根本没有被执行，所以整个替换流程完全没启动。

为什么原来的写法能工作？ #

原来的代码里，<body onload="_googWcmGet(callback, '0800-123-4567')">会在页面加载完成时自动调用Google的_googWcmGet函数，这个函数负责处理你传入的原始号码，再触发你定义的callback函数去替换span里的内容。

现在的问题出在哪？ #

你改成纯<body>标签后，没有任何地方调用_googWcmGet，所以你的callback永远不会被触发，span里的内容就会停留在你手动写的0800-123-4，不会被替换成目标格式化号码。

修复方案（三种可选） #

你只需要确保_googWcmGet在DOM加载完成后被调用即可，这里给你几种常用的实现方式：

1. 使用DOMContentLoaded事件（推荐）

把调用逻辑放到脚本里，监听DOM加载完成事件，这样更灵活也符合现代前端实践：

<head>
  <script type="text/javascript">
    var callback = function(formatted_number, mobile_number) {
      var e = document.getElementById("number");
      e.innerHTML = "";
      e.appendChild(document.createTextNode(formatted_number));
    };

    // 监听DOM加载完成后调用替换函数
    document.addEventListener('DOMContentLoaded', function() {
      _googWcmGet(callback, '0800-123-4567');
    });
  </script>
</head>
<body>
  <span id="number">0800-123-4</span>
</body>

2. 保留body的onload属性

如果你习惯原来的写法，只需要把onload加回去就行，span里的初始内容不影响最终结果（因为callback会完全替换它）：

<head>
  <script type="text/javascript">
    var callback = function(formatted_number, mobile_number) {
      var e = document.getElementById("number");
      e.innerHTML = "";
      e.appendChild(document.createTextNode(formatted_number));
    };
  </script>
</head>
<body onload="_googWcmGet(callback, '0800-123-4567')">
  <span id="number">0800-123-4</span>
</body>

3. 把脚本放到body末尾

利用HTML的加载顺序，把脚本放在span后面，这样脚本执行时span已经存在，可以直接调用函数：

<body>
  <span id="number">0800-123-4</span>
  <script type="text/javascript">
    var callback = function(formatted_number, mobile_number) {
      var e = document.getElementById("number");
      e.innerHTML = "";
      e.appendChild(document.createTextNode(formatted_number));
    };
    _googWcmGet(callback, '0800-123-4567');
  </script>
</body>

补充说明 #

你放在span里的初始内容（不管是部分号码还是完整号码）其实不影响最终的替换结果，因为你的callback函数会清空span的内容，再添加新的格式化号码文本，所以只要_googWcmGet被正确调用，最终都会显示你期望的格式化号码。

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