捕获加载页面完成的 HTTP 请求答案

【问题标题】：Capturing HTTP requests done by a loading page捕获加载页面完成的 HTTP 请求
【发布时间】：2016-12-13 13:11:33
【问题描述】：

请耐心等待，因为我需要比较长的解释才能告诉你我需要什么。

我正在构建一个 Web 开发框架，我需要处理的实体之一是 components。 component 是网页的一部分。可能是图表或表格或任何其他东西。通过调用类似的 javascript 方法将组件加载到页面中

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

这将告诉框架获取该组件some.namespace.component_name 的内容并将它们加载到dom_area，一个ID 为dom_area 的HTML 元素。

所有组件中最简单的是一段静态 HTML 代码。这段 HTML 可能包含创建新 HTTP 请求的元素，例如对 CSS 文件的引用、图像……等等。

组件存储在目录结构中。以上面提到的组件some.namespace.component_name为例，它会这样存储

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

确实，事情很简单。 KISS 原则是我的范例之一。 EMERALD.component.show('some.namespace.component_name','dom_area');，经过几件事后，加载了 HTML 片段 page.html。

我的问题是：在加载page.html时，如果加载layout.css和some_image.jpg，HTTP请求不会被加载，除非绝对引用，这样不方便我。

我想做的是有一个page.html 喜欢

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

还有一个layout.css 喜欢

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

然后捕获layout.css（page.html）和thering.png（layout.css）的HTTP请求，并附加正确的路径，以便正确加载。

我尝试了一些方法，但都没有奏效。有什么建议吗？

【问题讨论】：

标签： javascript jquery html css http

【解决方案1】：

如果您对单页解决方案没问题，您可以使用<base> 元素。那么你写的每一行都不需要绝对值。

Require.js 是您未来需求的完美解决方案。

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

【讨论】：

肯定不是“神奇的方式”。我的参考是正确的。你只是不明白我的意思。我说的是我只想提文件，没有绝对路径，让框架定位文件。这就是我只写文件名的原因。
但是我明白你的意思，你的解决方案对我来说是完美的。因为我使用的是 jQuery，而不是纯 Javascript，所以我把它缩短了一点。不过谢谢！
我很惊讶你不知道我对 KISS 的意思。 “保持简单，愚蠢”是一个广为人知的范式：pt.wikipedia.org/wiki/Keep_It_Simple 正如你（讽刺地）所说，它与魔法无关。这只是一种让事情变得非常简单的方法。众所周知，程序员会吸收代码中的复杂性，以便为用户简化事情。
大声笑，我意识到现在这就是我正在编辑答案的原因，非常欢迎您，先生。 :)
太好了！我还添加了一个建议，您应该查看Require.js。随着网站的发展，这正是您所需要的。