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