Is it possible to determine if <script> elements were included in the HTML source code or loaded in using another JavaScript script?

Question

Is it possible to determine if <script> elements were included in the HTML source code or loaded in using another JavaScript script?

For instance, when I use the code below to retrieve a NodeList of all scripts on a webpage:

document.querySelectorAll('script')

Is there a method to distinguish between scripts that were part of the original HTML source and those that were added later via other scripts?

I attempted to compare the data in the properties of each node/script:

However, I have yet to identify any distinct characteristics that set apart scripts present in the HTML source from ones loaded through another script.

While I recognize that I can obtain this information using the Network tab in developer tools under the initiator column, I am interested in being able to differentiate scripts programmatically with JavaScript if feasible.

If an alternative method to

document.querySelectorAll('script')

is necessary, I am open to exploring it as well.

Thank you for your help!

javascript nodelist

Answer 1

Answer №1

Request

If you're looking to identify all script tags that are dynamically added to the DOM post page load.

These could be either external scripts (connecting to a .js file) or inline-scripts, which were not part of the original HTML content.

Solution

To achieve this, you can intercept the document.createElement function and assign a unique data-external attribute to any script tags created after the initial page load.

You can then filter these tagged scripts to specifically target the external ones.

Presumptions

Make sure the hook code provided below is executed before anything else.
Have authority over the original HTML document
All external script additions are made through document.createElement method (although other atypical methods are disregarded in this solution)

Intercepting document.createElement

// Redefine the 'createElement' function
document.createElement = function(originalCreateFunc) {
    // return a customized new function, acting as our interception function.
    return function() {
        // invoke the original function to create the element
        var element = originalCreateFunc.apply(this, arguments);
        // verify if the created element is of 'script' type
        if (element.tagName.toLowerCase() === "script") {
            // if it's a script tag, add an attribute
            element.setAttribute("data-external", "true");
        }
        // return the modified element
        return element;
    };
}(document.createElement);

Filtering External Scripts

To exclusively fetch the external scripts, use the following line of code.

// Select only script tags with the 'data-external' attribute set to 'true'
document.querySelectorAll('script[data-external="true"]');

Answer 2

Request

If you're looking to identify all script tags that are dynamically added to the DOM post page load.

These could be either external scripts (connecting to a .js file) or inline-scripts, which were not part of the original HTML content.

Solution

To achieve this, you can intercept the document.createElement function and assign a unique data-external attribute to any script tags created after the initial page load.

You can then filter these tagged scripts to specifically target the external ones.

Presumptions

Make sure the hook code provided below is executed before anything else.
Have authority over the original HTML document
All external script additions are made through document.createElement method (although other atypical methods are disregarded in this solution)

Intercepting document.createElement

// Redefine the 'createElement' function
document.createElement = function(originalCreateFunc) {
    // return a customized new function, acting as our interception function.
    return function() {
        // invoke the original function to create the element
        var element = originalCreateFunc.apply(this, arguments);
        // verify if the created element is of 'script' type
        if (element.tagName.toLowerCase() === "script") {
            // if it's a script tag, add an attribute
            element.setAttribute("data-external", "true");
        }
        // return the modified element
        return element;
    };
}(document.createElement);

Filtering External Scripts

To exclusively fetch the external scripts, use the following line of code.

// Select only script tags with the 'data-external' attribute set to 'true'
document.querySelectorAll('script[data-external="true"]');

Answer 3

Answer №2

If you have full control over the HTML and JavaScript, you have the ability to add elements directly to the original HTML without affecting dynamically loaded content. For example, all HTML scripts could be structured like this:

<script class="html" src="..."></script>

When iterating through the scripts, you can check for this specific class:

document.querySelectorAll('script').forEach(s => {
    if (s.classList.contains("html")) {
        // do something
    } else { 
        // do something different
    }
});

Answer 4

If you have full control over the HTML and JavaScript, you have the ability to add elements directly to the original HTML without affecting dynamically loaded content. For example, all HTML scripts could be structured like this:

<script class="html" src="..."></script>

When iterating through the scripts, you can check for this specific class:

document.querySelectorAll('script').forEach(s => {
    if (s.classList.contains("html")) {
        // do something
    } else { 
        // do something different
    }
});

Is it possible to determine if <script> elements were included in the HTML source code or loaded in using another JavaScript script?

Answer №1

Request

Solution

Presumptions

Intercepting document.createElement

Filtering External Scripts

Answer №2

Similar questions

The Quickest Way to Retrieve Attribute Values in JavaScript

Using jQuery to eliminate selected item from a list

Comparison of Performance: PHP-Rendered Content vs. Using JavaScript and DOM with AJAX

Navigating to a new page once a backend function in Express has finished executing

Find the hex code corresponding to the darkest color in the JSON response

Angular directive ng-if on a certain path

Using React to dynamically change the page based on button clicks

Merge rxjs streams, identify modifications, and yield a single result

The Node child process remains active indefinitely, persisting even after receiving the necessary data

Encountering issues while retrieving information from database through AJAX and PHP

Distinguishing Jquery and Ajax

"Enhance Your Online Shopping Experience with Woocommerce Ajax Filters and

Multiple AJAX Requests in JavaScript Are Providing Incorrect Data Simultaneously

The program encountered an error while trying to access the 'username' property, as it was undefined

Applying various Angular filters to an array of objects within HTML select elements

Is there a way to change this coffeescript into js/jquery?

ng-if to switch elements on and off

jqxChart displaying data with proportions

Bring back hover guidelines following mouse click

Difficulty Navigating Table Elements Using jQuery