javascript - 拦截 HTML 导入

Question

我在网上找不到任何东西。我正在使用 Polymer 1.6，并且正在尝试对元素进行延迟加载。到目前为止，我已经成功地延迟加载它们并且速度大大提高了。

我正在做 App Shell 架构，我在其中捆绑(通过缩小和硫化)导航栏和抽屉工作所需的所有脚本。但是，一旦我这样做，就会有许多作为 App Shell 一部分的 HTML 导入，它们将被调用，因为它们的名称不同。

我可以从我的元素中删除 HTML 导入，但那样很容易出错。 注意:我知道 HTML 导入只执行一次，但由于它们是包的一部分，浏览器不知道如何阻止它的加载。

所以我想做的是拦截 HTML 导入，检查该元素是否是 App Shell 的一部分，如果它已经存在则阻止它的加载。

像这样:

 var appShellComponents : [
    'polymer'
    'my-navbar',
    'paper-button',
    'app-drawer'

    document.addEventListener('HTMLImportEvent', function(event){
       //Untested code below
         var href = event.srcTarget.href;
         var component = href.substr(href.lastIndexOf('/').replace('.html','');
        if(appShellComponents.indexOf(component) > -1){
         //Element has been loaded, reject the import. 
            return;
           }

    });

我还需要一种方法来使用其他浏览器(如 Firefox)来完成此操作。显然，Polymer 使用了一个调用 AJAX 的 polyfill。

Answer 1

最好的方法是在服务器端处理文件，例如使用 gulp 或 grunt 等程序。

您可以替换属性 rel='import'的 <link>具有您自己的自定义名称的元素，例如 rel='lazy-import' ，然后在浏览器中使用您自己的模块加载器处理它们。

---

如果您想在客户端运行时处理链接，您可以等待 onload事件 link (或 HTMLImportsLoaded 上的 document)，但我想这些事件对于您想要实现的目标来说为时已晚(实际上，这取决于不同 Web 组件的设计方式)。

---

但是使用 polyfill(对于 Firefox 和 Internet Explorer)，这是可能的，因为您可以修补实现 XMLHttpRequest 的代码。电话。不幸的是，它不适用于 Chrome 和 Opera，因为 <link>被本地解析和处理，<script>在导入的文件中，它们在下载时立即执行。

---

一种解决方法是将 Web 组件移动到一个文件夹中，这样它们就不会与初始亲属 href 一起被发现。 URL(或使用带有错误 url 的 <base> 元素)。然后你只需要插入 good <link>需要时。