how to get the html header element

advertisements

as i want to send the file names which is included in <head> section e.g. css & js file name including it's container folder to the server side via ajax.
please note that, in given example the css & js are located inside of files folder.
so how can i get the css & js file names including it's container

<html> <head>
  <link rel="stylesheet" href="files/sample.css"/>
  <script type="text/javascript" src="files/jquery.js"> </script>
</head>

Now i need to consider about other things too, sample.CSS

    #myImage {
       background: url('image/lucy.jpg');
  /* also i need to get these image file name including details with location */
    }


this is to get the resources names (stylesheets and scripts) in your head element :

function filterName(path){
    path = path.split('/');
    return path[path.length - 1];
}
var styleSheets = [];
$('head link[rel=stylesheet]').each(function(){
    styleSheets.push(filterName($(this).attr('href'));
});
var scripts = [];
$('head script[src]').each(function(){
    scripts.push(filterName($(this).attr('src'));
});

It's rather hard to actual parse these files and compute their fullpath. To get all the images, you may consider to traverse all of the dom elements and check if they have any background-image attached to them through css :

function filterBgImage(n){
    var m = n.match(/url\(["'](.*?)["']\)/);
    if(m && m.length == 2)
        return m[1];
    return n;
}
var imgs = [];
$('*')
    .filter(function(){
        var a =  $(this).css('background-image');
        return a != '' && a != 'none';
    })
    .each(function(){
        imgs.push(filterBgImage($(this).css('background-image')));
    });

The good thing about this approach is that you do not have to transform the relative path into full path, because jquery is doing that for you.