如何防止Google Tag Manager覆盖原生document.write()方法？

问题成因 #

• Google Tag Manager（GTM）初始化时会主动劫持document.open、document.write、document.close等原生DOM方法，目的是调度自身注入的第三方标签加载逻辑，避免直接调用document.write阻塞页面渲染。被劫持后的方法不会直接把传入的内容写入当前文档流，而是先进入GTM内部的缓冲区队列，只有符合GTM的调度时机才会处理。
• 你的调用时机是在Angular初始化完成、页面文档流已经关闭（document.readyState为interactive或complete）的阶段，此时GTM的劫持逻辑大概率会直接丢弃你传入的HTML内容，或是处理时序不符合预期，最终导致DOM没有被正确替换。

解决方案 #

方案1：提前缓存原生方法（最低改造成本） #

在GTM等第三方脚本加载执行之前，提前把原生DOM方法缓存下来，后续替换DOM时直接调用缓存的原生版本即可：

1. 在项目index.html的<head>标签最顶部，早于GTM引入代码的位置添加如下脚本：

// 预缓存原生DOM方法，避免被第三方脚本劫持
window.__nativeDocMethods = {
  open: document.open.bind(document),
  write: document.write.bind(document),
  close: document.close.bind(document)
};

2. 修改你的replaceDOM方法，调用缓存的原生方法：

private replaceDOM(newContent: string) {
  const native = (window as any).__nativeDocMethods;
  native.open();
  native.write(newContent);
  native.close();
}

方案2：替换实现逻辑，彻底规避document.write（更推荐） #

document.write本身在页面加载完成后调用就存在诸多限制和浏览器警告，你可以直接替换整个根HTML元素的内容实现相同效果，该方法几乎不会被第三方脚本劫持：

private replaceDOM(newContent: string) {
  document.documentElement.outerHTML = newContent;
}

这个方案不需要提前做任何缓存操作，执行逻辑更简单稳定，兼容性也更好。

内容的提问来源于stack exchange，提问作者Florian Gössele