Javascript loop through DOM elements is unreliable for async scripts

Question

I am trying to loop through DOM elements of a webpage in a content script from a Google chrome extension. The problem is the list of results turns out to be sometimes different and I suspect this is because of scripts tagged as async, but as the process should start with window.onload this doesn't make any sense to me. Does anyone see why this would happen? EDIT :: I started to think that could be because I mark the window.onload function async. Would that be the problem?

The javascript code is as the following. It adds '2' for scripts and '1' for iframes and '-1' for others, ( '-1' is ignored later).

async function exam(element){
        if (element.nodeName == 'SCRIPT'){
                return '2';
        }else if (element.nodeName == 'IFRAME'){
                return '1';
        }else{
                return '-1';
        }
}

async function domExam(element, list) {
        let res = await exam(element);
        if(res != '-1'){
            list.push(res);
        }
        let chNodes = element.children;
        if (chNodes.length > 0 ){
            for (let item of chNodes){
                list = await domExam(item, list);
            }
            return list;
        }else{
            return list;
        }
}

window.onload = async function(){
    list = await domExam(document, []);
    console.log("List::", list);
}

David Gomez · Accepted Answer · 2020-05-21 18:03:16Z

1

The deal with the onload event is that it may fire before one or more scripts are executed.

There may be some other scripts in the page that are being executed or loaded asynchronously and AFAIK there is no way to know when some third party script is going to be executed and somehow change the DOM. You'll have to assume that the DOM is and will always be mutable and work with it in that way.

edited May 21, 2020 at 18:03

answered May 21, 2020 at 14:23

David Gomez

1141 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iesiyok Over a year ago

thanks for your answer. In many places it's said that window.onload should be triggered after everything is loaded e.g. images. Are you sure that async javascript inclusions are exempt from this? stackoverflow.com/questions/40193553/…

David Gomez Over a year ago

Yes you never know when async loaded or async executed JS is going to finish loading or executing. That's why you need callbacks.

Andy Over a year ago

window.onload won't fire until async scripts are loaded. Async scripts don't block parsing, they can be executed in any order before and after document DOMContentLoaded, but before onload

cpri · Accepted Answer · 2020-05-22 10:20:05Z

0

As said in another answer the DOM may change at any time due to other javascript within the page

you could make use of MutationObserver to keep track of any changes, and run your function again against the new DOM (I would suggest debouncing this, as some scripts may make many small changes)

answered May 22, 2020 at 10:20

cpri

4514 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript loop through DOM elements is unreliable for async scripts

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related