Question

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

我正在构建一个Web开发框架，我需要处理的其中一个实体是components。 component是网页的一部分。可以是图表，表格或任何其他东西。通过调用javascript方法（如

）将组件加载到页面中

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

这将告诉框架获取此组件some.namespace.component_name的内容并将其加载到dom_area，即标识为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请求，并附加正确的路径，以便正确加载它们。

我尝试了一些东西，但都没有用。有什么建议吗？

Answer 1

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

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

{{1}}

捕获加载页面

1 个答案: