$('head').append(filePath) => Message d'erreur : Not allowed to load local resource

Version imprimable

Bonjour à tous,

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

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:

1 2 3 4 $(document).ready(function() { var optFolder = "/responsive/fancyBox_fullpack/source"; loadFile(optFolder); }); //Ready
La fonction loadFile est la suivante
Code:

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:

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:

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 :

Citation:

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

Citation:

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

et

Citation:

getScript()

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

Merci par avance pour toute aide.

08/03/2016, 09h56
SpaceFrog

pour des raisons de sécurité tu ne peux pas ajaxer un fichier local en protocole file ...
08/03/2016, 10h32
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

Citation:

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

Initialiser la variable filePath comme ci-dessous

Citation:

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

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

Citation:

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:

<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
08/03/2016, 10h44
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
08/03/2016, 11h05
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?

Citation:

filePath ="fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"
ou
filePath ="localhost:888/reponsive/fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"
08/03/2016, 11h09
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
08/03/2016, 11h33
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:

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 =>

Citation:

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

Code:

filePath ="../../fancyBox_fullpack/source/helpers/jquery.fancybox-buttons.js"
08/03/2016, 11h34
SpaceFrog

a partir du moment ou ton path commence par / il est relatif ...
08/03/2016, 11h40
informer

Merci pour l'info du /=> relatif.

Mais pour indiquer l'absolu depuis la racine, je commence par quoi?
08/03/2016, 12h30
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

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 ???)

Citation:

[{"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:

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