Disons que j'ai ce fragment HTML à Je peux récupérer ce fichier et insérer-le dans le DOM facilement: /path/fragment.html code>: const dom = document.getElementById('root');
const response = await fetch('/path/fragment.html');
const fragment = await response.text();
dom.innerHTML = fragment;
3 Réponses :
Vous pouvez aller à la route rapide et sale:
ou après l'insertion du code HTML, vous pouvez boucler via des éléments Vous pouvez également utiliser un dom.innerhtml = fragment.replace ('src = \' ./ ',' src = \ './ chemin /'); code> p> p> l>
code> et mettre à jour la source. p> li>
Oui, j'ai pensé à celles-ci. J'aimerais vraiment éviter de modifier les liens. Cela ressemble à des bugs sans fin. J'ai essayé la route iframe. Cela pourrait fonctionner mais je devrais hériter manuellement au parent CSS. Encore une fois, sonne l'erreur sujette
Bien que je suppose que je suppose qu'à la fin de la journée, tous les liens vont être soit SRC = ou Href =. Peut-être pas si sujette d'erreur.
Oui, pourrait bien aller. Il est juste difficile de battre un cadre Web complet et / ou un générateur de site statique pour gérer tout ce genre de choses pour vous. :-)
Si vous faites la méthode 2, vous trouverez que Edge (héritage, qui est) tentera de charger vos actifs d'image avant i> Vous avez la possibilité de remplacer les éléments code> . Le seul moyen d'éviter que c'est d'utiliser la méthode 1. Chrome / Firefox n'a pas ce problème.
@Michael Crenshaw a déjà souligné beaucoup d'options pour des solutions possibles, mais voici le mien p>
Utilisez un chemin absolu. De cette façon, le chemin sera toujours correct. P>
Oui c'est ce que je suis penché vers. Les chemins absolus s'intégrent bien avec tout mon système de toute façon. C'est un peu plus de travail à l'avant, mais probablement la solution la plus propre.
Je conviens que les chemins absolus fonctionneraient, même si la mise en place des chemins absolus dans des URL dynamiques pourrait être problématique. p>
Je pense que vous suggérez d'utiliser des gabarits chaînes telles que Il est peu probable qu'il soit conflictuel, et ils sont rapides et efficaces pour Si vous ne le faites pas Comme l'idée de "aveuglé" remplaçant toutes les chaînes de gabarits ou de l'analyse plus sophistiquée, vous créez un élément DOM et sélectionnez-les à l'avance: P> {{baseurl}} code> dans la source. p> .replace (/ {{\ \ s * baseurl \ s *}} /, '../foo') Modification h1> // fragment = ...
var div = document.createElement('div');
div.innerHTML = fragment;
// Modify the DOM in-memory
div.querySelectorAll('img[src^="/foo"]').forEach(function (el) {
el.src = el.src.replace(/\/foo/, "../foo");
});
// Append to the live DOM to be drawn
var widget = document.querySelector('.js-widget');
widget.appendChild(div);
Êtes-vous ouvert pour insérer le code HTML récupéré dans un iframe? Ensuite, vous pourriez probablement mettre sa base href et accomplir ce que vous essayez de faire
J'ai essayé un iframe. Cela fonctionne comme prévu mais n'hérite pas à la CSS du parent, etc. Je devrais travailler avec manuellement ces types de problèmes. Je ferai cela si je dois mais je voulais vérifier d'abord des alternatives plus élégantes.