Find <video> tag in newly opened window in Javascript

Question

I want to cycle trough a list of links and open each of them in a new window and get the tag in each of them.

So far I have achieved this:

for(var i = 0; i < links.length; i++) {
            console.log(links[i]);
            var openedWindow = window.open(links[i], '_blank').focus();
            videoList.push(openedWindow.document.querySelectorAll("div video")); //Add the video links in the newly opened video
            openedWindow.close();
}

videoList is a global variable

const videoList = [];

The error I get whenevery I try to run this code in Chrome

Uncaught TypeError: Cannot read properties of undefined (reading 'document')
at grabLinks (<anonymous>:15:45)
at <anonymous>:69:1

The error is in this line of code:

videoList.push(openedWindow.document.querySelectorAll("div video"));

My question is what exactly am I doing wrong and how can I fix it?

If you need more information please tell me.

Answer 1

Since the links are on the same origin as the page where you're running this, you should be able to access the contents of the documents — but you have to wait for those contents to load, which your current code isn't doing. That involves waiting for an event from openedWindow , which means the entire process will be asynchronous.

Separately, your current code is grabbing the video elements, but you're closing the window that those video elements live in. That may well be okay, but from the name grabLinks it sounds like you're primarily interested in the currentSrc or src of the video elements, so let's grab that.

I'd write a function to do a single window, probably returning a promise:

function getVideoSources(link) {
    return new Promise((resolve, reject) => {
        const openedWindow = window.open(link, "_blank");
        openedWindow.focus();
        openedWindow.addEventListener("DOMContentLoaded", () => {
            try {
                const videoElements = openedWindow.document.querySelectorAll("div video");
                const sources = Array.from(videoElements, element => element.currentSrc || element.src);
                resolve(sources);
            } catch (e) {
                reject(e);
            } finally {
                try {
                    openedWindow.close();
                } catch (e2) { } // In an up-to-date browser, you can leave
                                 // the `(e2)` part off
            }
        });
    });
}

Then grabLinks could be an async function that works its way through the URLs in series (since the browser won't let you open a bunch of windows all at once, and the focus() calls would interfere with each other):

async function grabLinks(links) {
    const videoList = [];
    for (const link of links) {
        const sources = await getVideoSources(link);
        videoList.push(...sources);
    }
    return videoList;
}

The fulfillment value of the promise from grabLinks will be an array of the currentSrc or src property values from the elements.

Beware , though, that this needs to be kicked off by a user action (button click or similar), and the browser may limit how many windows you can open in a row.