Get array of css & js links from external file(AJAX)

**Oziam** · 01-11-2011, 11:45 PM

Hi,
I have an ajax script which gets an external file(html/php etc...) and loads it into an assigned DIV container, this works great, but what I am trying to do is get an array of any .js and/or .css path/filenames from within that external file so I can include them in the parent HEAD section.

I have a function that will do the rest I just need a way of getting the path/filenames associated with .js .css from a <script> or <link> tag and be put into an array then passed to a function call

e.g of desired result: incjscss('pathto/style.css', pathto/script.js');

I have tried to read from the XMLHttpRequest responseText but it gives an error of "data is not available at this time" or similar, any help would be appreciated!

Thanks!!!

**djr33** · 01-12-2011, 12:50 AM

This isn't a direct answer to your question, but it might solve your problem:
http://www.dynamicdrive.com/forums/s...ad.php?t=55727

**Oziam** · 01-12-2011, 07:55 AM

Thanks for the info, but unfortunately it's not what I am looking for!

Anyway goto go and sand bank front yard, the water is coming up pretty quick

, cheers!

**jscheuer1** · 01-12-2011, 04:27 PM

This is a bit like mixing apples and oranges in the dark. Ideally you would be importing and parsing a valid XML (.xml) document. Then you could pick out the tags and the attributes of those tags that you wanted.

But there's potentially another problem - how to get the script and the style link into the head of your 'top' page in a meaningful fashion.

That error sounds like you're trying to parse the response before it's available. But since you're not being specific about the error, it could mean virtually anything.

We really would need a link to your page and to the page(s) you would be importing. They do all have to be on the same domain. If testing locally, in some browsers they all have to be in the same folder.

All that said, this 'works':

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var re = [/[^"]+\.css[^"]*/, /[^"]+\.js[^"]*/];
	function incjscss(css, js){
		alert('The css path is: ' + css + '\nThe js path is: ' + js);
	}
	function process(d){
		var r1, r2;
		r1 = (r1 = re[0].exec(d))? r1[0] : null;
		r2 = (r2 = re[1].exec(d))? r2[0] : null;
		incjscss(r1, r2);
	}
	$.get('test.htm', process);
});
</script>
</head>
<body>
</body>
</html>

It requires one and only one script tag and one and only one link style tag. The script tag's src attribute must be to a .js file and the stylesheet link tag's href attribute must be to a .css file. There can be no other .css or .js files mentioned on the imported page, at least not before the tags we are interested in.

If there are more script and/or stylesheet link tags and you need them all, the code would have to be expanded. It makes no attempt to insert the script or the style tags into the head of the 'top' page, it simply alerts the paths and filenames.

**Oziam** · 01-12-2011, 10:49 PM

Thanks a bunch this works great it is almost exactly what I am looking for!

I slightly modified the code to work with a function to add the relevant tags to the head section of the parent page, all I really need now to make it perfect is a way to include ALL script and link paths instead of just one of each!

The code I have now;

Code:

var loadedobjs= '';

jQuery(function($){
	var re = [/[^"]+\.css[^"]*/, /[^"]+\.js[^"]*/];

	function process(d){
		var r1, r2;
		r1 = (r1 = re[0].exec(d))? r1[0] : "";
		r2 = (r2 = re[1].exec(d))? r2[0] : "";
		loadobjs(r1, r2);
	}
	$.get('test.htm', process);
});

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjs.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjs+=file+" " //Remember this object as being already added to page
}
}
}

Thanks again it really helps!

**jscheuer1** · 01-13-2011, 12:16 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var re = [/[^"]+\.css[^"]*/g, /[^"]+\.js[^"]*/g];
	function incjscss(){
		var r = '';
		for(var i = 0; i < arguments.length; ++i){
			r += arguments[i] + '\n';
		}
		alert(r);
	}
	function process(d){
		var r1 = d.match(re[0]) || [], r2 = d.match(re[1]) || [];
		incjscss.apply(window, r1.concat(r2));
	}
	$.ajax({url: 'test.htm', cache: false, success: process});
});
</script>
</head>
<body>
</body>
</html>

For what you have loadobjs(), it will work:

Code:

loadobjs.apply(window, r1.concat(r2));

Now it will take in all the script tags and stylesheet link tags. However, if there is any mention of .css or .js on the page that aren't stylesheet links or script tags respectively, these will be attempted to be loaded as well.

**Oziam** · 01-13-2011, 01:43 AM

You're a CHAMPION, thanks that's perfect, aslong as the requested page doesn't have any href css or js links things will work nicely, I doubt that will be too much of a problem though.

Thanks again for all your help!!!!

**jscheuer1** · 01-13-2011, 02:30 PM

Here's a more refined version:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var re = [/<link [^>]*href *= *"[^"]+\.css[^"]*(?="[^<]*>)/gi, /<script [^>]*src *= *"[^"]+\.js[^"]*(?="[^<]*>)/gi, /.*(href|src) *= *"/i];
	function incjscss(){
		var r = '';
		for(var i = 0; i < arguments.length; ++i){
			r += arguments[i] + '\n';
		}
		alert(r);
	}
	function process(d){
		var r = (d.match(re[0]) || []).concat(d.match(re[1]) || []);
		$.each(r, function(i, v){
			r[i] = v.replace(re[2], '');
		});
		incjscss.apply(window, r);
	}
	$.ajax({url: 'test.htm', cache: false, success: process});
});
</script>
</head>
<body>
</body>
</html>

This one only matches link tags with href attributes including .css, or script tags with src attributes including .js. It's case insensitive. So unlike the previous version will also match .JS and .CSS and <LINK, etc.

Like the previous version, and this is a limitation I did not mention before but that did and still does exist, you have to have the href or src attribute on the imported page quoted.

**Oziam** · 01-13-2011, 10:36 PM

Hey Thanks again! It just keeps getting better,
if I were a rich man(sounds like a song coming on, LOL) I would pay you well,
but I'm not so I can just say I really appreciate your help!
Also I think it's a good thing the paths need to be quoted, it's good practice to use them when writing html.

I also added a small bit of code to the process function to stop
if it returns an empty result.

Final Code:
========

Code:

jQuery(function($){

  var re = [/<link [^>]*href *= *"[^"]+\.css[^"]*(?="[^<]*>)/gi, 
	    /<script [^>]*src *= *"[^"]+\.js[^"]*(?="[^<]*>)/gi, 
	    /.*(href|src) *= *"/i];

  function process(d){
  var r = (d.match(re[0]) || []).concat(d.match(re[1]) || []);
  $.each(r, function(i, v){ r[i] = v.replace(re[2], '');
  });
  if (r == "" || r == null || typeof(r) == 'undefined'){
  return
  }
  else{ loadobjs.apply(window, r);}
  }
  $.ajax({url: 'page.html', cache: false, success: process});
});

Seems to work on all browsers I have tested, IE, Opera, Firefox & Safari

**pasteIN** · 05-04-2011, 06:53 PM

Hello guy(s),

I am having trouble with this appropriate solution here. Are you saying that this code goes on the external file? or on the main file that host the "DIV container"?

Also, does the js and css have to be in the same folder?

Thanks in advance for the reply...