Question

我有一个（Polymer）Web组件，我希望以跨域资源共享（CORS）方式让人们可以访问它。这工作正常，但我不确定如何为该组件内的JS代码提供图像和JSON文件等资源的相对路径。它们被解释为相对于包含页面，而不是相对于HTML导入。我想要的我想要的是一个JS变量，它给出了导入的包含html文件的路径。相对路径很重要，因为我还希望人们能够轻松地将其部署到他们自己的站点，而不是依赖于我的资源副本的硬编码路径。

例如，您在example.com上加载index.html，它具有：

<link rel="import" href="//my-site.com/components/my-component/my-component.html">

<my-component> ... </my-component>

现在在my-component.html内，我有一些JS根据用户的配置文件加载一些资源 - i18next.js的图像和JSON语言文件。问题是，除非我将它们指定为my-site.com的绝对路径，我不想这样做，它们将被解释为相对于example.com/index.html处的页面，而不是相对于路径my-component.html

我在模板中静态指定的任何图像都能正常工作并正确加载，因为它与HTML导入路径相关。我只是不确定如何为从JS加载的资源执行此操作，因为它们将相对于包含页面（example.com/index.html）。是否存在暴露此导入路径的某个属性或函数？感谢。

Answer 1

要创建相对路径，可以使用Polymer元素的resolvePath方法。 Here's the docs on it

ex：this.resolvePath('x-foo.png')

更新：resolvePath替换为Polymer 1.0

的resolveUrl

Answer 2

我发现您可以使用document.currentScript.baseURI从其中的脚本中访问导入的URL。我正在做这样的事情：

<script>
    (function () {
        var srcURL = new window.URL(document.currentScript.baseURI);
        var baseURL = srcURL.origin + srcURL.pathname.substr(0, srcURL.pathname.lastIndexOf("/") + 1);

        // can use baseURL here to load resources
        Polymer({...});
    })();
</script>

一个问题：当我硫化一切因为路径改变时，上面的代码不起作用。我稍后会调查那个。

来自JS和HTML导入的相对路径资源

2 个答案: