1

考虑以下代码段：

var iframe = document.createElement('iframe');
iframe.src = 'foobar.html';
document.body.appendChild(iframe);

iframe.onload = function () {
    var nodeIterator = iframe.contentDocument.createNodeIterator(
        iframe.contentDocument.body,
        NodeFilter.SHOW_ELEMENT,
        { acceptNode: function (node) {
            if (node.hasAttribute('id')) {
                return NodeFilter.FILTER_ACCEPT;
            } else {
                return NodeFilter.FILTER_SKIP;
            }
        }}, false),
    currentNode, someArray = [];

    while (currentNode = nodeIterator.nextNode()) {
        // Calculate offsetLeft
        someArray.push({
            id: currentNode.id,
            left: (function () {
                var a = currentNode, b = 0;
                while (a) {
                    b += a.offsetLeft;
                    a = a.offsetParent;
                }
                return b;
            }())
        });

        // On element click, log offsetLeft after calculating again
        currentNode.onclick = function (e) {
            e.stopPropagation();
            var a = this, b = 0;
            while (a) {
                b += a.offsetLeft;
                a = a.offsetParent;
            }
            console.log(b);
        };
    }
};

我遇到的问题是：对于某些元素，offsetLeft第二次计算时的计算不同。使用谷歌浏览器的检查器，我可以看到第二次计算offsetLeft总是准确的。

在节点迭代期间完成的offsetLeft计算对于某些元素是错误的，但始终如一（在页面刷新期间该值始终相同）。

我想知道是否有人对为什么会这样有任何见解。我一直在想，它iframe.onload实际上是在其元素contentDocument完全加载完成之前触发的，导致某些元素最初向左或向右更远。

4

0 回答 0