[Javascript] Encapsuler du javascript, du css et des images dans une seule et même image

Publié le 03 mai 2010 par Ubugnu
Bonjour,
Il y'a quelques mois j'ai eu besoin d'encapsuler tout mes scripts, css et images dans une seul image, puis appeler cette image avec AJAX, et extraire le tout pour l'insérer dans le document. Je ne sais pas si ça va servir mais c'est intéressant de voir que ça marche ;-)
Donc, pour le tester, créez un dossier sur un serveur, mettez tout vos scripts, css et images (vous pouvez les mettre à la racine, dans des dossiers,...etc comme vous voulez), éventuellement numérotez vos scripts 1.js, 2.js, ... etc au cas ou l'un doit être inclus avant l'autre.
Mettez dans la racine du dossier une image nommée js.png, c'est elle qui va intégrer les scripts et les css.
Mettez dans la racine du dossier ce script PHP:

Code PHP:<? 
// embed images as data:image/gif;base64,... 
function read_from_file ($file) {
  
$handle = @fopen($file"r");
  
$data '';
  if (
$handle) {
  while (!
feof($handle)) {
  
$buffer fgets($handle4096);
  
$data .= $buffer;
  }
  
fclose($handle);
  }
  return 
rtrim($data);
}
function 
write_to_file ($file$data) {
  
$fp fopen($file"w");
  
fwrite($fp$data);
  
fclose($fp);
}
function 
lReplace($m) {
  echo 
"  : image "$GLOBALS['dn'].'/'$m[1].'.'$m[3]."  base64 encoded in"$GLOBALS['fn']."<br>";
  return 
"data:image/gif;base64,"base64_encode(read_from_file($GLOBALS['dn'].'/'$m[1].'.'$m[3]));
}
function 
lParse($dirname,$file) {
  
$GLOBALS['dn'] = $dirname;
  
$GLOBALS['fn'] = $dirname"/"$file;
  
$path $dirname"/"$file;
  
$data read_from_file($path);
  
write_to_file($path,preg_replace_callback('/([^\'\(\."\s]*)(\.)(gif|jpg|bmp|png)/i',lReplace,$data));
}
function 
read_dir1($dirname,$i) {
  
$j=$i+1;
  
$ind="";
  while(
$i) {$ind .= '__';$i--;}
  if (
is_dir($dirname))
  
$dir_handle opendir($dirname);
  if (!
$dir_handle)
  return 
false;
  while(
$file readdir($dir_handle)) {
  if (
$file != "." $file != "..") {
  if (!
is_dir($dirname"/"$file)) {
  echo 
$ind$dirname"/"$file"<br>";
  if(
preg_match('/.(\.)(css|js)/',$file)) {lParse($dirname,$file);}
  }
  else
  
read_dir1($dirname'/'$file,$j);
  }
  }
  
closedir($dir_handle);
  return 
true;

read_dir1('.',0);

// embed css and js in an image 
function store($d,$f) {
  if(
preg_match('/.(\.)(js)$/',$f)) $GLOBALS['data_js'] .= read_from_file($d"/"$f);
  if(
preg_match('/.(\.)(js)$/',$f)) $GLOBALS['data_js'] .= "\n\n";
  if(
preg_match('/.(\.)(css)$/',$f)) $GLOBALS['data_css'] .= read_from_file($d"/"$f);
  if(
preg_match('/.(\.)(css)$/',$f)) $GLOBALS['data_css'] .= "\n\n";
}
$ord 1;
if(
$ord) {
  function 
reador_dir($dirname,$i,$max) {
  
$j=$i+1;
  
$ind="";
  while(
$i) {$ind .= '__';$i--;}
  if (
is_dir($dirname))
  
$dir_handle opendir($dirname);
  if (!
$dir_handle)
  return 
false;
  while(
$file readdir($dir_handle)) {
  if (
$file != "." $file != "..") {
  if (!
is_dir($dirname"/"$file)) {
  if(
preg_match('/(\d){1,2}(\.)(js)$/',$file,$m) & $m[1]>$max) {$max=$m[1];}
  }
  else
  
$max reador_dir($dirname'/'$file,$j,$max);
  }
  }
  
closedir($dir_handle);
  return 
$max;
  }
  function 
storord($dirname,$i) {
  if (
is_dir($dirname))
  
$dir_handle opendir($dirname);
  if (!
$dir_handle)
  return 
false;
  while(
$file readdir($dir_handle)) {
  if (
$file != "." $file != "..") {
  if (!
is_dir($dirname"/"$file)) {
  if(
preg_match("/$i(\.)(js)$/",$file)) {store($dirname,$file);echo "store($dirname/$file)<br>";}
  }
  else
  
storord($dirname'/'$file,$i);
  }
  }
  
closedir($dir_handle);
  return 
false;
  }
  echo 
"max is "reador_dir('.',0,1)."<br>";
  
$i=1;
  while(
$i<reador_dir('.',0,1)+1) {storord('.',$i); $i++;}
}
function 
read_dir2($dirname,$i,$ord) {
  
$j=$i+1;
  
$ind="";
  while(
$i) {$ind .= '__';$i--;}
  if (
is_dir($dirname))
  
$dir_handle opendir($dirname);
  if (!
$dir_handle)
  return 
false;
  while(
$file readdir($dir_handle)) {
  if (
$file != "." $file != "..") {
  if (!
is_dir($dirname"/"$file)) {
  if(
preg_match('/.(\.)(css|js)$/',$file) & !$ord) {store($dirname,$file);echo "store($dirname/$file)<br>";}
  elseif(
preg_match('/.(\.)(css|js)$/',$file) & !preg_match('/(\d){1,2}(\.)(css|js)$/',$file)) {store($dirname,$file);echo "store($dirname/$file)<br>";}
  }
  else
  
read_dir2($dirname'/'$file,$j,$ord);
  }
  }
  
closedir($dir_handle);
  return 
true;

read_dir2('.',0,$ord); 
write_to_file ("js.png"read_from_file("js.png")."\n[JS]"$GLOBALS['data_js']."\n[CSS]"$GLOBALS['data_css']); 
?>Lancez ce script PHP, vous remarquerez qu'a la fin la taille de l'image aura considérablement augmenté, maintenant, dans la page qui doit inclure ce que vous avez encapsulé dans l'image, mettre le code javascript suivant:
Code JAVASCRIPT:<script>
function 
get_js (url) {
  var 
request false;
  if(
windowXMLHttpRequest) {
  
request = new XMLHttpRequest();
  if(
requestoverrideMimeType) {
  
requestoverrideMimeType('text/xml');
  }
  } else if(
windowActiveXObject) {
  var 
versions = ['Microsoft.XMLHTTP''MSXML.XMLHTTP''Microsoft.XMLHTTP''Msxml2.XMLHTTP.7.0''Msxml2.XMLHTTP.6.0''Msxml2.XMLHTTP.5.0''Msxml2.XMLHTTP.4.0''MSXML2.XMLHTTP.3.0''MSXML2.XMLHTTP'];
  for(var 
i=0i<versionslengthi++) {
  try {
  
request = new ActiveXObject(versions[i]);
  } catch(
e) {}
  }
  }
  
xmlHttpReq request;
  
xmlHttpReqopen("GET",urlfalse);
  
//xmlHttpReq.onload = load_image(xmlHttpReq.responseText);
  
xmlHttpReqsend(null);
  return 
xmlHttpReqresponseText;
}
function 
ress(resp,type) {
  var 
b1 respindexOf('[JS]') + 4;
  var 
b2 respindexOf('[CSS]') + 5;
  var 
delb b2-b1-5;
  if(
type=="js") return respsubstr(b1,delb);
  if(
type=="css") return respsubstring(b2);
}
var 
resp get_js('js.png','js');
var 
html_doc documentgetElementsByTagName('head').item(0);
var 
js documentcreateElement('script'); jstextContent ress(resp,'js'); html_docappendChild(js);
var 
sty documentcreateElement('style'); stytextContent ress(resp,'css'); html_docappendChild(sty); 

</script>  Voila, maintenant vous pouvez utiliser le javascript et le css avec les images comme si vous l'avez inclue directement.
J'espère que j'ai été claire :-)