请耐心等待，因为我需要较长的解释才能告诉您我需要什么。
我正在构建一个 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的HTTP请求(在 page.html 中)和 thering.png (在 layout.css 中)并附加正确的路径，以便它们可以正确加载。
我尝试了一些方法，但都没有用。有什么建议吗？
最佳答案
如果您对单页解决方案没问题，您可以使用 <base> 元素。那么你写的每一行都不需要绝对值。
Require.js 是满足您 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>关于javascript - 捕获加载页面完成的 HTTP 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38817703/