使用document.write向iframe注入内容触发Chrome违规警告，求替代方案？

问题背景 #

我知道document.write出于多种原因不被推荐，但目前正通过它向iframe注入程序化生成的HTML，代码如下：

var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(generateHtml())
iframe.contentWindow.document.close()

该方法完全适配我的使用场景，但Chrome会弹出预期警告：[Violation] Avoid using document.write().
请问是否可以抑制或消除该警告？还是只能接受它？

我尝试过其他注入方式但均存在问题：

• 直接设置src为data:text/html; ...——存在长度限制
• 设置srcdoc为HTML内容——作为备选方案，但存在浏览器兼容性问题
• 使用btoa将HTML转为base64后设置src为data:text/html;base64,...——编码失败，报错Invalid regular expression: Range out of order in character class

恳请提供相关建议！

解决方案建议 #

一、处理警告的两种思路 #

1. 彻底消除警告：替换document.write写法
   Chrome的警告是针对document.write的调用，你可以用直接修改iframe文档DOM的方式替代，效果完全一致且不会触发警告，代码示例：

var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
const iframeDoc = iframe.contentWindow.document
// 先完成文档初始化
iframeDoc.open()
iframeDoc.close()
// 直接替换根元素内容
iframeDoc.documentElement.innerHTML = generateHtml()

2. 无法直接屏蔽警告
   Chrome的这个警告是内置的开发者提示，没有提供通过代码直接关闭该特定警告的设置，如果坚持使用原document.write的写法，只能接受这个警告。

二、优化你尝试过的替代方案 #

针对之前遇到的问题，有对应的优化方法：

• 解决base64编码失败问题
  btoa仅支持ASCII字符，当HTML包含非ASCII字符时会报错，你可以先将字符串转为UTF-8编码再进行base64转换，代码示例：

function htmlToBase64(html) {
  const utf8Bytes = new TextEncoder().encode(html)
  const base64 = btoa(String.fromCharCode(...utf8Bytes))
  return `data:text/html;base64,${base64}`
}
// 使用方式
iframe.src = htmlToBase64(generateHtml())

这种方式能支持包含任意字符的HTML，同时也能突破普通data URI的长度限制。

• 兼容处理srcdoc方案
  如果你的目标浏览器包含旧版本（比如IE），可以做兼容性判断后回退到其他方案：

if ('srcdoc' in HTMLIFrameElement.prototype) {
  iframe.srcdoc = generateHtml()
} else {
  // 回退到innerHTML或base64方案
}

总结 #

优先推荐用document.documentElement.innerHTML替换原写法，既能消除警告又不影响功能；如果坚持原写法，只能接受警告。另外优化后的base64方案可以解决你之前的编码问题，作为备选方案也很可靠。

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