Javascript:如果没有 "document.body.onresize"，更改 "console.log"不会生效

Question

我正在编写一个带有 Canvas 的网站。该网站有一个脚本，除了末尾的一行之外，每次刷新都能成功运行。当脚本结束时:

document.body.onresize = function() {viewport.resizeCanvas()}

“document.body.onresize”不变。 (我在 Chrome 的 javascript 控制台中仔细检查:输入“document.body.onresize”返回“undefined”。)

但是，当脚本结束时:

document.body.onresize = function() {viewport.resizeCanvas()}
console.log(document.body.onresize)

“document.body.onresize”确实改变了。该功能完全正常工作。

我无法解释为什么这两段功能相同的代码会产生不同的结果。谁能帮忙？

---

编辑:据我所知，“document.body”指的是正确的“document.body”。当我在分配 document.body.onresize 之前调用 console.log(document.body) 时，会打印正确的 HTML。

---

编辑 2:解决方案(某种程度上)

当我将“文档”替换为“窗口”时，每次调整窗口大小时都会正确调用视口(viewport)的“resizeCanvas”函数。

为什么“window”有效而“document”仅在您先调用“console.log”时有效？一点线索都没有。

Answer 1

调整事件大小:不行

大多数浏览器不支持窗口对象以外的任何对象的调整大小事件。根据this page ，只有 Opera 支持检测调整大小的文档。您可以使用 test page在多个浏览器中快速测试它。 Another source提到 body 元素上的调整大小事件还特别指出它不起作用。如果我们看these bug在 Internet Explorer 的报告中，我们发现在任意元素上触发调整大小事件是一项 Internet Explorer 独有功能，此功能已被删除。

Object.observe:也许在未来

已经提出了一种更通用的确定属性更改的方法，并且很可能会跨浏览器实现:Object.observe() .您可以观察任何属性的变化并在发生变化时运行函数。这样，您可以观察元素，当任何属性发生变化时，例如 clientWidth 或 clientHeight，您将收到通知。它目前只能在启用了实验性 Javascript 标志的 Chrome 中使用。另外，它是 buggy 。我只能让 Chrome 通知我有关 Javascript 内部更改的属性，而不是浏览器更改的属性。实验性的东西；将来可能会或可能不会。

当前解决方案

目前，您必须进行脏检查:将您要监视的属性的值分配给一个变量，然后检查它是否每 100 毫秒发生变化。例如，如果页面上有以下 HTML:

<span id="editableSpan" contentEditable>Change me!</span>

还有这个脚本:

window.onload = function() {

function watch(obj, prop, func) {
    var oldVal = null;
    setInterval(function() {
        var newVal = obj[prop];
        if(oldVal !=  newVal) {
            var oldValArg = oldVal;
            oldVal = newVal;
            func(newVal, oldValArg);
        }
    }, 100);
}

var span = document.querySelector('#editableSpan');

// add a watch on the offsetWidth property of the span element

watch(span, "offsetWidth", function(newVal, oldVal) {
    console.log("width changed", oldVal, newVal);
});

}

这类似于 Object.observe，例如 AngularJS 框架中的 watch 函数。它并不完美，因为有了很多这样的检查，您将每 100 毫秒运行大量代码。此外，任何 Action 都会延迟 100 毫秒。您可以通过使用 requestAnimationFrame 而不是 setInterval 来改进这一点。这样，只要浏览器重绘您的网页，就会注意到更新。