Ed de Almeida Ed de Almeida - 3 months ago 7
CSS Question

Capturing HTTP requests done by a loading page

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?

Answer

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>

Comments