Capturing HTTP requests done by a loading page

Question

Please be patient, because it will take me a relatively long explanation in order to tell you what I need.

I'm building a web development framework and one of the entities I need to deal with are components. A component is a part of a web page. May be a graph or a table or any other thing. A component is loaded in a page by a call to a javascript method like

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

This would tell the framework to get the contents of this component some.namespace.component_name and load them into dom_area, a HTML element with id dom_area.

The simplest of all components is a static piece of HTML code. And this piece of HTML may contain elements who create new HTTP requests, like references to CSS files, images... whatever.

A component is stored in a directory structure. Using the component some.namespace.component_name mentioned above as an example, it would be stored like this

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

Things are very simple, indeed. The KISS principle is one of my paradigms. The EMERALD.component.show('some.namespace.component_name','dom_area');, after a few things, loads the HTML fragment page.html.

My problem is: When page.html is loaded, if it loads layout.css and some_image.jpg, the HTTP requests are not going to be loaded, unless they are referenced absolutely, and this is not convenient to me.

What I would like to do is have a page.html like

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

and a layout.css like

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

And then capture the HTTP requests of layout.css (in page.html) and thering.png (in layout.css) and append the right path so that they may be loaded correctly.

I've tried a few things, but none worked. Any suggestions?

zer00ne · Accepted Answer · 2016-08-08 00:18:03Z

1

If you are ok with a one page solution, you can use <base> element. Then the absolute value is there just not required for every line you write.

Require.js is perfect solution for your needs in the future.

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

edited Aug 8, 2016 at 0:18

answered Aug 7, 2016 at 23:24

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Edvaldo Silva de Almeida Jr Over a year ago

Not a "magical way", for sure. And my references were right. You just don't get what I mean. What I said was I intended only to mention the file, with no absolute paths, and let the framework locate the file. This is the reason why I wrote just the name of the file.

Edvaldo Silva de Almeida Jr Over a year ago

But I got what you mean and your solution is perfect to me. I made it a bit shorter because I use jQuery, not pure Javascript. But thanks!

Edvaldo Silva de Almeida Jr Over a year ago

I'm just surprised you don't know what I mean with KISS. "Keep it Simple, Stupid" is a largely known paradigm: pt.wikipedia.org/wiki/Keep_It_Simple It has nothing to do with magic, as you (ironically) said. It just a way to keep things very simple. And programmers, as you surely know, absorb complexity in the code, in order to make things simple for the users.

zer00ne Over a year ago

Lol, I realized that now that's why I'm editing the answer, and you are very welcome, sir. :)

zer00ne Over a year ago

That's great! I also added a suggestion that you should look into Require.js. It is exactly what you need as your site grows.

|

Collectives™ on Stack Overflow

Capturing HTTP requests done by a loading page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related