Yga*_*man 6 html javascript css event-handling javascript-events
我写了一个chrome扩展,在页面加载之前工作(使用属性"run_at": "document_start").问题是我想在div创建网页主体后立即添加标签.之前document.body是null所以我不能附加标签.
我不关心身体的全负荷,我只需要它存在.
我正在尝试找到body创建html中的标记时提醒的最佳方法(未完全加载,刚刚创建).我可以写这个案例的事件处理程序吗？
另外,我不想使用jQuery或任何其他非内置库.
谢谢!
您可以使用变异观察器来document.documentElement监听其变化,childList并查看是否添加的东西body.
示例:实时复制
<!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事件可用于检测完全加载的页面).