Is there a way to use JavaScript to retrieve a list of files that were loaded by the browser during the last request

Question

Is there a way to use JavaScript to retrieve a list of files that were loaded by the browser during the last request

I'm just starting out in the world of JavaScript and I have a query: is there a method to retrieve a list of files that were loaded by the browser during the last request? To clarify, when a browser loads a webpage, it not only downloads the HTML file but also any CSS, JPEG, and other necessary files. I am interested in knowing through a JavaScript script on the page the names of those loaded files. Thank you in advance!

javascript html css http

Answer 1

Answer №1

If you're looking for a solution using jQuery, here's one approach you could take:

$('script').each(function(){
    var file = $(this).attr("src");
    $("#result").append(file + "<br />"); 
});

$('link').each(function(){
    var file = $(this).attr("href");
    $("#result").append(file + "<br />"); 
});

$('img').each(function(){
    var file = $(this).attr("src");
    $("#result").append(file + "<br />"); 
});

Check out the demonstration on this JSFiddle link.

If you prefer a pure JavaScript solution, you can try something like this:

var script = document.getElementsByTagName("SCRIPT");
for (var i = 0; i < script.length; i++) {
    document.getElementById("result").innerHTML += script[i].src + "<br />";
}

var image = document.getElementsByTagName("IMG");
for (var i = 0; i < image.length; i++) {
    document.getElementById("result").innerHTML += image[i].src + "<br />";
}

var link = document.getElementsByTagName("LINK");
for (var i = 0; i < link.length; i++) {
    document.getElementById("result").innerHTML += link[i].href + "<br />";
}

Here is the JSFiddle showcasing the implementation with pure JavaScript: http://jsfiddle.net/Lotc8dda/

Answer 2

If you're looking for a solution using jQuery, here's one approach you could take:

$('script').each(function(){
    var file = $(this).attr("src");
    $("#result").append(file + "<br />"); 
});

$('link').each(function(){
    var file = $(this).attr("href");
    $("#result").append(file + "<br />"); 
});

$('img').each(function(){
    var file = $(this).attr("src");
    $("#result").append(file + "<br />"); 
});

Check out the demonstration on this JSFiddle link.

If you prefer a pure JavaScript solution, you can try something like this:

var script = document.getElementsByTagName("SCRIPT");
for (var i = 0; i < script.length; i++) {
    document.getElementById("result").innerHTML += script[i].src + "<br />";
}

var image = document.getElementsByTagName("IMG");
for (var i = 0; i < image.length; i++) {
    document.getElementById("result").innerHTML += image[i].src + "<br />";
}

var link = document.getElementsByTagName("LINK");
for (var i = 0; i < link.length; i++) {
    document.getElementById("result").innerHTML += link[i].href + "<br />";
}

Here is the JSFiddle showcasing the implementation with pure JavaScript: http://jsfiddle.net/Lotc8dda/

Is there a way to use JavaScript to retrieve a list of files that were loaded by the browser during the last request

Answer №1

Similar questions

What is causing the error message "Uncaught TypeError: Cannot read property 'helpers' of undefined" to occur in my straight-forward Meteor application?

The data from the server is inaccessible to node.js

encountering difficulties with installing dependencies using yarn or npm

The request for an advertisement was successful, however, no ad could be displayed as there was insufficient ad inventory available. Please handle the situation appropriately with the

CSS transitions following with visual/codepen

Customizable form with dynamic content and interactive button within a set location

Updating a property in an object within an Angular service and accessing it in a different controller

Selenium in Java is unable to send keys or click on elements

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Encountered a problem during the installation of tensorflowjs for node | Received an error: Command failed: node-pre-gyp install

How come my variable doesn't show up in the view even though I filled it in the controller?

Enhance your bootstrap accordion by incorporating stylish up and down arrows using the <accordion> element

The Oscillator node in the Web Audio API is unable to be started more than once due to an error

What is the best way to create and deliver favicons using Webpack?

CSS - Struggling to identify the source of unwanted horizontal scrolling?

CSS: Firefox shows the menu with adequate right margin

Contrast between Q.defer() and the Promise() function

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

Extract the URL parameter and eliminate all characters following the final forward slash