等待document.body存在
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了等待document.body存在相关的知识，希望对你有一定的参考价值。
我写了一个chrome扩展，在页面加载之前工作（使用属性"run_at": "document_start"）。问题是我想在网页正文创建后立即添加div标记。在那之前document.body为null所以我不能附加标签。
我不关心身体的全负荷，我只需要它存在。
我正在尝试找到在html中创建body标签时提醒的最佳方式（未完全加载，刚刚创建）。我可以写这个案例的事件处理程序吗？
另外，我不想使用jQuery或任何其他非内置库。
谢谢！
答案
你可以在mutation observer上使用document.documentElement听取其childList的变化，并期待看到添加的东西是否是body。
示例：Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script>
(function() {
"use strict";
var observer = new MutationObserver(function() {
if (document.body) {
// It exists now
document.body.insertAdjacentHTML(
"beforeend",
"<div>Found <code>body</code></div>"
);
observer.disconnect();
}
});
observer.observe(document.documentElement, {childList: true});
})();
</script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
另一答案
您可以使用类似于DOMContentLoaded的$(document).ready()事件
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
MDN说
DOMContentLoaded事件在document完全加载和解析后触发，无需等待样式表，图像和子帧完成加载（load事件可用于检测完全加载的页面）。
以上是关于等待document.body存在的主要内容，如果未能解决你的问题，请参考以下文章
JS的document.body.outerHTML,这个方法