Capture de requêtes HTTP effectuées par une page de chargement

Veuillez patienter, car il me faudra une explication relativement longue pour vous dire ce dont j'ai besoin.Capture de requêtes HTTP effectuées par une page de chargement

Je crée un framework de développement web et l'une des entités dont j'ai besoin est components. Un component fait partie d'une page Web. Peut être un graphique ou une table ou toute autre chose. Un composant est chargé dans une page par un appel à une méthode javascript comme

EMERALD.component.show('some.namespace.component_name','dom_area');

Ce raconterait le cadre pour obtenir le contenu de ce composant some.namespace.component_name et les charger dans dom_area, un élément HTML avec id dom_area.

Le plus simple de tous les composants est un morceau de code HTML statique. Et ce morceau de HTML peut contenir des éléments qui créent de nouvelles requêtes HTTP, comme des références à des fichiers CSS, des images ... peu importe.

Un composant est stocké dans une structure de répertoire. Utilisation du composant some.namespace.component_name mentionné ci-dessus à titre d'exemple, il serait stocké comme cette

assets/ 
    | 
    -- components/ 
     | 
     --some/ 
      | 
      -- namespace/ 
       | 
       -- component_name/ 
        | 
        -- config.json 
        | 
        -- css/ 
        | | 
        | -- layout.css 
        | 
        -- images/ 
        | | 
        | -- some_image.jpg 
        -- page.html

Les choses sont très simples, en effet. Le principe KISS est l'un de mes paradigmes. Le EMERALD.component.show('some.namespace.component_name','dom_area');, après quelques éléments, charge le fragment HTML page.html.

Mon problème est: Lorsque page.html est chargé, si elle charge layout.css et some_image.jpg, les requêtes HTTP ne vont pas à charger, à moins qu'ils ne sont référencés absolument, et ce n'est pas pratique pour moi.

Ce que je voudrais faire est d'avoir un page.html comme

<link rel="stylesheet" type="text/css" href="layout.css"> 
<div class="container-fluid"> 
    <div class="thering"></div> 
</div>

et un layout.css comme

.thering { 
    height: 385px; 
    background: #000 url('thering.png'); 
    border-color: #222 !important; 
}

Et puis saisir les requêtes HTTP de layout.css (en page.html) et thering.png (en layout.css) et ajouter le chemin de droite afin qu'ils puissent être chargés correctement. J'ai essayé quelques petites choses, mais aucune n'a fonctionné. Aucune suggestion?

Source

2016-08-07 Ed de Almeida

Si vous êtes d'accord avec une solution d'une page, vous pouvez utiliser l'élément <base>. Ensuite, la valeur absolue n'est pas nécessaire pour chaque ligne que vous écrivez.

Require.js est la solution parfaite pour vos besoins dans le futur.

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Add Base</title> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var base = document.createElement('base'); 
 
    base.href = 'https://sub.domain.com/absolute/path/to/'; 
 
    document.getElementsByTagName('head')[0].appendChild(base); 
 
    </script> 
 
</body> 
 

 
</html>

Source

2016-08-07 23:24:05 zer00ne

Pas "façon magique", bien sûr. Et mes références étaient justes. Vous ne comprenez pas ce que je veux dire. Ce que j'ai dit était que je voulais seulement mentionner le fichier, sans chemins absolus, et laisser le framework localiser le fichier. C'est la raison pour laquelle j'ai écrit juste le nom du fichier. –

Mais j'ai compris ce que vous voulez dire et votre solution est parfaite pour moi. Je l'ai fait un peu plus court car j'utilise jQuery, pas du Javascript pur. Mais merci! –

Je suis juste surpris que vous ne sachiez pas ce que je veux dire avec KISS. "Keep it Simple, Stupid" est un paradigme largement connu: https: // pt.wikipedia.org/wiki/Keep_It_Simple Cela n'a rien à voir avec la magie, comme vous l'avez dit (ironiquement). C'est juste un moyen de garder les choses très simples. Et les programmeurs, comme vous le savez certainement, absorbent la complexité dans le code, afin de rendre les choses simples pour les utilisateurs. –

Capture de requêtes HTTP effectuées par une page de chargement

Répondre

Questions connexes