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、2 回目の計算で計算が異なります。Google Chrome のインスペクタを使用すると、2 回目の計算offsetLeftは常に正確であることがわかります。

Node Iteration 中に行われるoffsetLeft計算は、一部の要素では正しくありませんが、一貫して行われます (値はページを更新しても常に同じです)。

なぜこれが当てはまるのかについて誰かが何か洞察を持っているかどうか疑問に思っています。その中の要素のロードが完全に完了iframe.onloadする前に実際に発火し、一部の要素が最初はさらに左または右になると考えていました。contentDocument

4

0 に答える 0