React环境下嵌入的第三方widget脚本无法生成HTML问题排查求助

• 第三方脚本依赖document.write的执行时机和加载模式：Polldaddy的问卷脚本内部使用document.write方法生成问卷DOM，在原生静态HTML中，脚本是普通同步脚本，嵌入在body的目标位置同步执行，此时DOM还处于解析构建阶段，document.write可以正常将内容写入到当前script标签的相邻位置。而在React项目中，你是在DOM加载完成后（如useEffect、componentDidMount生命周期中）动态创建script标签插入DOM，这种方式创建的script默认是异步加载，且执行时页面DOM树已构建完成，document.readyState已进入interactive或complete状态，此时调用document.write会被浏览器限制执行，甚至会直接清空现有页面内容，自然无法生成预期的问卷结构。
• 脚本插入位置不匹配：原生静态代码中脚本直接放在问卷要挂载的目标div内部，脚本运行时可以直接定位到自身所在的父节点作为渲染容器。你将脚本插入到head标签中，脚本无法找到对应的挂载容器，不知道要将生成的问卷DOM插入到哪个位置，导致渲染失败。
• React虚拟DOM更新冲突：就算你将脚本插入到body的对应位置，脚本生成的DOM不属于React的虚拟DOM树管理范围，后续如果组件触发重渲染，React在执行diff算法时会将这部分外部生成的DOM判定为冗余节点，直接将其删除，导致问卷内容消失。

• 调整脚本插入位置：不要将脚本插入head，在需要渲染问卷的组件中先渲染出挂载用的空div，再将动态创建的script标签插入到该空div内部，保证脚本可以找到对应的挂载容器。
• 隔离渲染环境：使用iframe标签承载问卷的静态HTML代码，让问卷脚本在独立的iframe环境中运行，完全和React的DOM更新逻辑隔离，避免冲突。
• 替换document.write逻辑：如果可以修改第三方脚本逻辑，可将内部的document.write替换为主动选择目标容器插入DOM的逻辑，适配单页应用的动态加载场景。

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