在页面加载时插入 DOM 元素，而不是之后答案

【问题标题】：Inserting DOM element while page is loading, not afterwards在页面加载时插入 DOM 元素，而不是之后
【发布时间】：2012-12-03 03:28:51
【问题描述】：

我正在开发一个 chrome 扩展，它将一个 div 插入到 dom 的 body 元素中。现在我正在创建一个在加载时触发以创建元素的事件处理程序。这当然意味着页面加载完成，然后我的div被插入，这意味着用户看到页面没有div，直到加载完成，然后div弹出。我希望 div 在页面加载时在那里。有没有办法在编写任何其他元素之前劫持 body 元素？还是我必须以某种方式隐藏内容，直到所有内容都加载完毕，这当然意味着用户会看到一段时间的空白屏幕。

如果可能的话，我想避免使用 jQuery。

【问题讨论】：

使用 "run_at": "document_end" 将保证 div 尽早被注入，尽管它不保证用户不会在 DOM 中看到这种变化.

标签： javascript dom google-chrome-extension

【解决方案1】：

我不是 100% 确定，但是查看 Chrome 扩展程序开发人员指南，看起来如果您使用的是内容脚本并将扩展程序清单中的 run_at 字段指定为 document_start，那么它应该注入构建 DOM 之前的文件。

【讨论】：

正确。注意：在 document_start，document.body does not exists yet. You have to inject using document.documentElement.appendChild(element);`
@RobW，所以注入的div会放在body之外？这似乎是不正确的 html。
@Stan 在document_start，唯一存在的标签是<html>，所以它是唯一的选择。而且我还没有遇到过这种方法失败的页面。
@RobW，是的，我知道，这就是为什么我要问div 将如何“生活”在body 之外，作为html 的独立子代？我承认 div 实际上是插入的，但我不确定现代浏览器是如何呈现和处理它的。
我尝试了你的建议，但无法让它与我的 div 一起使用，如果我没记错的话，它必须住在 body 部分，原因如下：我的 div创建是“全屏”并禁用滚动，我通过在 body (overflow:hidden) 上设置样式属性和在 div (width:100%;height:100%;position:absolute;left:0px;top:'+document.body.scrollTop+';z-index:1000') 上设置一个样式属性来实现。我尝试在 document.documentElement 上设置所有这些但没有成功。我知道我没有在原始问题中明确说明这一点。我应该添加吗？不知道这里的礼仪。