Discussion :

[informer]

Bonjour à tous,


Je veux charger des fichiers JS et CSS dynamiquement mais j'ai l'erreur suivante:

1. Not allowed to load local resource: file:///D:/xampp/htdocs/responsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.css

Sur le $(document).ready(function() j'appelle la fonction de chargement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function() 
{	var optFolder = "/responsive/fancyBox_fullpack/source";
	loadFile(optFolder);
}); //Ready

La fonction loadFile est la suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function loadFile(pathFolder )
{	var jqXHR = ajaxOutput(pathFolder);
	jqXHR.success(function (jqXHRData) 
	{	var filePath ="";
		for (i = 0; i < jqXHRData.length; i++) 
		{	if (jqXHRData[i]["fic"].substr(-3) ==="css")
			{	 filePath = "<link rel='stylesheet' href=' " + jqXHRData[i]["fic"] +  "' media='screen' />";
				$('head').append(filePath);
			}
			else if (jqXHRData[i]["fic"].substr(-2) ==="js")
			{	filePath = "<link rel='stylesheet' href='" + jqXHRData[i]["fic"] +  "' media='screen' />";
				$('head').append(filePath);
			}
		}
	});
	jqXHR.error( function (jqXHR, ajaxOptions, thrownError)
	{	var errMsg = formatErrorMessage(jqXHR, thrownError);
		alert(errMsg);
	});
}
 
function ajaxOutput(pathFolder)
{	var pathFolderJSon= {};
	pathFolderJSon.pathFolder = pathFolder;
	var jqXHResponse =	$.ajax	
	({	type: "POST",
		url: "php/filesFolderList.php",
		data: pathFolderJSon,
		dataType: "json" //Le format JSon texte est toujours initialisé
	});	
	return jqXHResponse; 
} 
 
function formatErrorMessage(jqXHR, exception) {...}

J'ajoute le code du PHP pour l'appel à la fonction de recherche récursive des fichiers dans un répertoire avec la méthode RecursiveIteratorIterator

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$pathFolder = urldecode($_POST['pathFolder']);
$pathFolderRoot = $_SERVER['DOCUMENT_ROOT'].$pathFolder;
 
$pathFolderRoot  = json_decode(str_replace("/", "\\",  json_encode($pathFolderRoot)));
 
$sdirr2 = getcwd();
$dir = dir($pathFolderRoot);
 
while($itemDir = $dir->read() ) 
{        $d[] = $itemDir;
}
 
$objectsFolder = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($pathFolderRoot), RecursiveIteratorIterator::SELF_FIRST);
 
foreach ($objectsFolder as $file)
{       if (!$file->isDir()){$filesList[] = array ("fic"=>$file->getPathname());}
}
$returnData =  json_encode($filesList); 
echo  $returnData;
 
?>

Tout irait dans le meilleur des monde si le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
filePath = "<link rel='stylesheet' href='" + jqXHRData[i]["fic"] +  "' media='screen' />";
$('head').append(filePath);

Ne générait pas le message ci-dessous aussi bien pour les JS que pour les CSS :

Not allowed to load local resource: file:///D:/xampp/htdocs/responsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js (01:09:47:485 | error, security)
at (anonymous function) (js/jquery-1.11.3.min.js:4:20731)
at m.fn.extend.domManip (js/jquery-1.11.3.min.js:4:22916)
at m.fn.extend.append (js/jquery-1.11.3.min.js:4:20620)
at (anonymous function) (:1:11)
at evaluate (:505:28)
at InjectedScript._evaluateOn (:875:55)
at InjectedScript._evaluateAndWrap (:808:34)
at InjectedScript.evaluateOnCallFrame (:933:21)
at (anonymous function) (js/own/filesManager.js:48:5)
at j (js/jquery-1.11.3.min.js:2:27309)
at k.fireWith (js/jquery-1.11.3.min.js:2:28122)
at x (js/jquery-1.11.3.min.js:5:22111)
at b (js/jquery-1.11.3.min.js:5:26030)

De plus, si différence il y a entre

$('head').append(filePath);

et

getScript()

cela reste très nébuleux. Une petite explication serait la bienvenue

Merci par avance pour toute aide.

[SpaceFrog]

pour des raisons de sécurité tu ne peux pas ajaxer un fichier local en protocole file ...

[informer]

Bonjour SpaceFrog

Pourrais tu m'expliquer ce que veut dire protocole file?

Cela signifie-t-il que je ne peux pas charger de fichier CSS et JS $('head').append(filePath) car alors je n'ai vraiment rien compris des posts que j'ai lu ou est-ce le chemin qui doit être relatif par rapport à la racine donc avoir par exemple si mon aborescence est

responsive
I
I__ fancyBox_fullpack
I_source
I_helpers
I_jquery.fancybox-buttons.js
I__ js

Initialiser la variable filePath comme ci-dessous

filePath ="fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"

Cela aurait-il changé quelque chose si j'avais initialisé

filePath ="localhost:888/reponsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"

car si j'avais placé l'appel directement dans la page html j'aurais eu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"></script>

Mais tout ça soulève une vraie incompréhension sur le DOM, le chargement de fichiers CSS et JS et le type d'accès aux fichiers sur le server.

Une nouvelle fois merci de ton aide et pour tes explications

[SpaceFrog]

le protocole file c'est file:// lecture de fichiers directs sur le disque dur

le protocole http:// suppose un accès pas un serveur web

[informer]

ça s’éclaircit mais pour être sûr de comprendre, pourrais-tu me confirmer que les 2 exemples fonctionnent et si non me donner un exemple de code correct?

filePath ="fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"
ou
filePath ="localhost:888/reponsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"

[SpaceFrog]

tu confonds les chemins relatifs ou absolus qui n'ont rien à voir avec le protocole file ou http

avec http tu passe par le serveur web, il y a des limitation d'accès pour des raisons de sécurité
mais pour accéder à un fichier tu peux soit le faire de façon relative, c'est a dire donner le chemin d'accès depuis le fichier dans le quel tu te trouves
ou de façon absolue, c'est a dire par rapport à la racine de ton site web

[informer]

Tu as raison je me prends les pieds dans le tapis. Si je veux donc utiliser $('head').append(filePath) alors je code ceci

en avec un chemin absolu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filePath ="responsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"

Par contre avec un chemin relatif, quel est le répertoire considéré, celui

1. 1er fichier appelant ici ownIndexDomReady.js sous racine?/responsive/js/own
2. Le fichier dans lequel s'exécute $('head') ici filesManager.js sous racine?/responsive/js/own

Ce qui voudrait dire, sachant que j'ai l'arborescence suivante
responsive
I__ fancyBox_fullpack
.....I__ source
..........I__ helpers
..............I__ jquery.fancybox-buttons.js
I__ js
.....I__ own
...........I__ ownIndexDomReady.js
...........I__ filesManager.js

que je suis obligé de remonter de 2 niveaux pour être sous la racine et ensuite repartir sur =>

../../fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filePath ="../../fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"

[SpaceFrog]

a partir du moment ou ton path commence par / il est relatif ...

[informer]

Merci pour l'info du /=> relatif.

Mais pour indiquer l'absolu depuis la racine, je commence par quoi?

[SpaceFrog]

le chemin absolu passe par la racine du site ...
donc commence par le nom de domaine
http://localhost
http://127.0.0.1
http://nomdedomaine

[informer]

Bonjour SapceFrog,

Je n'arrive pas à avoir une idée claire sur le problème.

Toujours avec pour exemple l'arborescence suivante

• responsive
  
  • fancyBox_fullpack
    
    • source
      
      • helpers
        
        • jquery.fancybox-buttons.js
        • jquery.fancybox-buttons.css
        
        
      
      
    
    
  • js
    
    • own
      
      • ownIndexDomReady.js
      • filesManager.js
      
      
    
    
  
  

Si je travaille en chemin relatif, faut-il prendre en compte l'emplacement du fichier dans lequel s'exécute la commande $('head').append(filePath) dans mon cas responsive/js/own/filesManager.js, ce qui voudrait dire alors que mon chemin pour appeler jquery.fancybox-buttons.js devrait être ../../fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"
Sachant que jqXHRData reçoit les données suivantes (A remarquer que j'ai en retour de l'appel PHP, \/ ==> Faut-il que je supprime le backslash ???)

[{"fic":"fancyBox_fullpack\/source\/helpers\/jquery.fancybox-buttons.css"},
{"fic":"fancyBox_fullpack\/source\/helpers\/jquery.fancybox-buttons.js"}]

J'aurais par conséquent la fonction de chargement suivante toujours dans l'hypothèse ou il faut prendre le dossier d'exécution comme étant celui de responsive/js/own/filesManager.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadFile(pathFolder )
{    var jqXHR = ajaxOutput(pathFolder);
    jqXHR.success(function (jqXHRData) 
    {    var filePath ="";
        for (i = 0; i < jqXHRData.length; i++) 
        {    if (jqXHRData[i]["fic"].substr(-3) ==="css")
            {     filePath = "<link href='../../" + jqXHRData[i]["fic"] +  " rel='stylesheet'>";
                $('head').append(filePath);
            }
            else if (jqXHRData[i]["fic"].substr(-2) ==="js")
            {    filePath = "<script src='../../" + jqXHRData[i]["fic"] + "'></script>";
                $('head').append(filePath);
            }
        }
    });
    jqXHR.error( function (jqXHR, ajaxOptions, thrownError)
    {    var errMsg = formatErrorMessage(jqXHR, thrownError);
        alert(errMsg);
    });
}// loadFile

Merci pour ton aide