jQuery Girl
  1. jQuery Girl
  3. Chargement d’une page HTML externe avec des chemins relatifs dans une DIV à l’aide de jQuery
Intereting Posts
Reliure de jQuery Validator Couleur de fond glisser vers le bas Plusieurs appels ajax en même temps ajax sous-page pour communiquer à nouveau à la page parente présélectionner l’option de sélection html après la redirection window.location JQuery xml boucles d’parsing L’interface utilisateur de JQuery remove supprime les animations de classe jQuery encapsule plusieurs éléments indépendamment du niveau ASP.NET MVC Url.Action dans JQuery n’est pas reconnu Jeton d’authenticité de requête Rails 3 AJAX ignoré Comment empêcher la frappe de deux chiffres après un nombre décimal? FormData ajax upload sur IE8 -> alternatives et son fonctionnement jQuery UI Draggable / Sortable – Récupère la référence d’un nouvel élément que fait la fonction jQuery data () Activer l’onglet du hachage de l’emplacement

Chargement d’une page HTML externe avec des chemins relatifs dans une DIV à l’aide de jQuery

Je suis relativement nouveau sur jQuery et je pardonne si cette question est trop simple, mais j’ai cherché de nombreux sujets pendant des heures et je ne trouve pas de solution définitive.

J’ai la structure de dossier suivante: 

/index.html /html/pages/page1.html /html/pages/images/ /html/pages/css/ /html/pages/js/ /html/pages/includes/

J’essaie de charger page1.html dans une DIV dans index.html de la manière suivante: 

 $('#content').load('html/pages/page1.html', function () { console.log('loaded'); });

page1.html se charge bien, cependant, il se compose de plusieurs includes et tout son contenu (images, CSS, JS, etc.) est relatif au dossier des pages (par exemple: ../images/header.jpg), donc il ne s’affiche pas lorsqu’il est chargé dans index.html puisque tout devient relatif à / ou index.html .

J’ai lu quelque part que rendre tous les chemins absolus ou relatifs relatifs dans page1.html fonctionnerait, en ajoutant également une sorte de variable de chemin globale. Cependant, le PROBLÈME est qu’il y a trop de contenu hérité et qu’il n’est pas possible de tout changer.

Existe-t-il un moyen de charger page1.html comme décrit ci-dessus sans modifier aucun des chemins, même s’ils sont relatifs? Ou quelqu’un peut-il recommander un moyen efficace (autres plugins, techniques) de charger du contenu externe de cette manière?

Je vous remercie!

Si tout est relatif au dossier de pages , vous pouvez utiliser une simple recherche et remplacement. Ce n’est pas la meilleure pratique de programmation, car elle n’est pas aussi flexible (passer de relatif à absolu dans ce type de contexte repose sur un certain nombre de facteurs qui fonctionnent correctement) comme il se doit, mais cela fonctionnera. 

 $.get('html/pages/page1.html', {}, function(data, status, xhr) { var updatedData = data.replace(/\.\.\/(images|css|js)+/g, "http://www.mywebsite.com/html/$1"); $('#content').html(updatedData); });

Modifier:

Vous pouvez également utiliser un script proxy et réécrire / router toutes les demandes de ce dossier vers le script proxy. Je ne sais pas quelle technologie côté serveur vous utilisez, mais vous pouvez le faire:

En utilisant .htaccess (ou similaire), redirigez toutes les demandes dirigées vers ce dossier vers un autre script de votre base de code. Dans le script, recherchez le chemin entrant dans le script, chargez le contenu de sortie d’origine, effectuez une recherche / remplacement et exportez le contenu dans la mémoire tampon. En outre, vous pouvez configurer la mise en cache sur le serveur de sorte que le client mette en cache les demandes, ce qui réduit le temps système de traitement que vous pourriez subir (bien que ce soit plutôt minime).