0

Like in the title. With jQuery, or even simple JavaScript code, I can get table of all scripts (CSSes and images) that particular page uses, and I'm looking, if there is any solution to get each resource file size?

I think I did a quite good research here. Most answers are about files uploaded to server, being uploaded or just before being uploaded, so that is not, what I'm looking for. There is some support introduced in HTML5, but again, it seems to be for uploaded files only.

Of course, I'm looking for a cross-browser solution, so using some crappy file-object, introduced in old IE, is also not, what I'm looking for. Also, please let me underline, that I'm talking purely about checking file size of a file stored on server, accessible by given URL. So, please, don't write answers like, that I can't access local files, from JavaScript, for security reasons. I already know that.

I found quite great solution on SO, but it uses AJAX request to solve the problem. Although it is very interesting (sending request of HEAD type), it might not work on all servers (but was tested by answer's author that is supported to all major browsers). And I'm a bit thrilling about firing AJAX request for each resource I find on each analysed page.

So, I'm assuming that there isn't such solution. And I would be happy, if someone could prove that my assumption is wrong. But, then, on the other hand, how do they do this in for example Firebug? If I'm not mistaken, XPI extensions are written in JavaScript, right? And Firebug certinally can measure sizes of resuorces used in current website.

Community
  • 1
  • 1
trejder
  • 17,148
  • 27
  • 124
  • 216

1 Answers1

1

To verify content length from inline scripts you can use their .text attribute.

document.getElementsByTagName('script')[0].text.length //works for inline scripts

For external scripts, where .src attribute refer to another file/resource, there's a problem with Access-Control-Allow-Origin security constraint, unless you allow them in your browser settings. If the external scripts are from the same domain as the page where you are trying to catch them, is ok.

I created a fiddle to demonstrate how to get their content length.

UPDATED 20/07

Firebug has its own implementation to intercept page loads that extends the Mozilla.org observer-service.

Question 'An observer for page loads in a custom xul:browser' should give you an idea of how to implement this kind of interceptor using Mozilla Add-on API.

Community
  • 1
  • 1
Flavio Cysne
  • 1,436
  • 8
  • 8
  • Thanks for your reply. I'm going to accept your answer within few days, if there will be no other, even though it violates, what I wrote in question (end of third pragraph) -- that the idea of getting file again (using AJAX) just to get it's size, isn't that interesting. Mainly, because it will generate a lot of additional requests and in the effect, can highly increase server load. – trejder Jul 20 '12 at 06:13
  • Sorry, I have misunderstood the 3rd paragraph thinking that using a GET would be an acceptable alternative since some servers are configured to not send Content-Length response header. – Flavio Cysne Jul 20 '12 at 12:34