javascript - 如何使用聚合物在其他浏览器中启用 HTML 导入？

Question

作为标题，我在我的网站中使用了 HTML 导入链接：

<link rel="import" href="http://XX.XX.XX.XX/">
<script type="text/javascript">
    var link = document.querySelector('link[rel="import"]');
var content = link.import;

// Grab DOM from warning.html's document.
var el = content.querySelector('body');
</script>

变体“链接”在 Chrome 中返回一个文档，但在 Safari 和其他浏览器中返回 null。我知道目前只有 Chrome 支持 HTML 导入功能，所以我在导入链接之前添加了以下代码以加载 Polymer 的 webcomponents.js：

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

但它仍然在其他浏览器中返回 null，谁能告诉我如何解决它？

Answer 1

这是因为<link>请求是异步的。

捕获HTMLImportsLoaded事件，仅在浏览器加载文件时解析文件：

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://XX.XX.XX.XX/XX/warning.html">
<script type="text/javascript">
window.addEventListener( "HTMLImportsLoaded", function () 
{
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('body');
} )
</script>