offsetLeft Value Changes Unexpectedly

Question

Consider the following code segment:

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);
        };
    }
};

The issue I'm having is this: For some of the elements, the offsetLeft calculation is different the second time it's calculated. Using Google Chrome's inspector, I can see that the second time the calculation occurs offsetLeft is always accurate.

The offsetLeft calculation done during Node Iteration is wrong for some elements, but consistently (the value is always the same across page refreshes).

I'm wondering if anyone has any insights as to why this is the case. I've been thinking that iframe.onload actually fires before the elements in its contentDocument have finished loading completely, causing some elements to be further left or right initially.

Maybe I'm misunderstanding something, but in this code: `var a = currentNode, b = 0;while (a) {...`, won't the while condition always be true? Also, your IIFE appears to have a syntax error. Towards the end, you have `}())`, which I **think** should be `})()` — Asad Saeeduddin, Oct 18 '12 at 17:45
@Asad `})()` and `}())` are actually equivalent. Also, the condition for `a` won't always be true because in the loop `a` is continually reassigned to the `offsetParent`. Eventually, `offsetParent` will be undefined. — Micah Henning, Oct 18 '12 at 18:53

offsetLeft Value Changes Unexpectedly

0 Answers0