Question

尽管Mozilla遗憾地宣布他们无意在不久的将来发布HTML Imports，但seems possible通过about：config中的dom.webcomponent.enabled首选项在Firefox中启用它们。

我目前正在尝试使用此功能，因为我相信导入将是Web开发的一个很好的补充。现在由于某种原因，我似乎无法通过以下设置使其正常工作：

一个名为 main.html
导入第一个文档的一个辅助文档，名为 import.html
最后，一个名为 import.css 的CSS文件链接到 import.html

main.html 包含以下代码：

 <head>
  <link rel="import" href="import.html">
  </head>
    <body>
      <script>
        var link = document.querySelector('link[rel="import"]');
        var content = link.import;
        var grab = content.querySelector('.importme'); 
        document.body.appendChild(grab.cloneNode(true));
      </script>
    </body>

import.html 包含：

<link href="import.css" rel="stylesheet">
<div class="importme">
  <p>This is the import</p>
</div>

，CSS文件只读：

p{ color: blue; }

当我加载 main.html 时，段落显示成功，但没有应用任何CSS样式（在这种情况下，文字颜色仍为黑色）。

然而，它似乎在Chrome中运行得很好（现在默认情况下应该处理导入 - 请注意，如果首先将页面上传到服务器并从服务器加载，这仅适用于Chrome）。

知道我做错了什么吗？在线阅读该页面并不适用于Firefox（仍然是黑色段落）。我真的需要让这项工作脱机，因为我必须经常在线上传我的网页才能使用Chrome查看这些内容并不是一个真正的选择。

Answer 1

解决方案：

清除浏览器缓存。看看它是否有效（它应该工作）。
使用〜/后跟路径。看，如果有效。
最后，如果无效，请使用绝对网址。

Answer 2

我认为这与脚本执行的位置有关。 main.html中的脚本在main.html的域内执行，而不是import.html。 main.html中不存在import.css的链接。我想如果你把css链接放在main.html而不是import.html中就行了。

Answer 3

默认情况下，Firefox不支持HTML导入。有关详细信息，请参阅此http://caniuse.com/#feat=imports

CSS样式无法在HTML中使用Firefox导入

3 个答案: