Question

使用需要webcomponents-lite.min.js的Firefox。

在我的index.html中，我webcomponents-lite.min.js执行并在我的routing.js脚本之前加载：

  <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true,
      };

      // Load webcomponentsjs polyfill if browser does not support native
      // Web Components
      (function() {
        'use strict';

        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = false;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

    <link rel="import" href="/elements/elements.html">
    <link rel="import" href="/elements/my-app.html">

    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <!-- build:remove -->
    <span id="browser-sync-binding"></span>
    <!-- endbuild -->
    <iron-meta key="HOST" value="http://80.40.3.2"></iron-meta>
    <my-app></my-app>
    <!-- Built with love using Polymer Starter Kit -->
   </body>
  <script src="/js/routing.js"></script>

但是，在routing.js之前加载firefox webcomponents-lite.min.js中的网络标签。这导致错误，因为我需要在webcomponents-lite.min.js之前加载routing.js。

由于没有aysnc行为，订单应该得到保证，对吧？为什么会发生这种情况？如果没有使用更多事件监听器和if语句进行过度编码，我怎样才能使这个命令工作？

Answer 1

不要将routing.js导入为.js文件。

首先，您应切换到routing.html并将路由文件转换为聚合物元素。我正在使用page.js，这就像5分钟的工作。相信我，当我的项目变得更大时，它帮助了很多。对于导入，您可以使用Polymer的函数importHref。

我有类似的问题所以我通过在所有导入准备好的时候在另一个调用routing函数的函数中导入onload文件来解决它。

在你的情况下：

  <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true,
      };

      // Load webcomponentsjs polyfill if browser does not support native
      // Web Components
      (function() {
        'use strict';

        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var importLinks = function() {
          Polymer.Base.importHref("/elements/routing.html", function() { onload() });
        }

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = false;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = importLinks;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/elements/elements.html">
    <link rel="import" href="/elements/my-app.html">
    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <!-- build:remove -->
    <span id="browser-sync-binding"></span>
    <!-- endbuild -->
    <iron-meta key="HOST" value="http://80.40.3.2"></iron-meta>
    <my-app></my-app>
    <!-- Built with love using Polymer Starter Kit -->
   </body>

在这种情况下，请勿忘记导入polymer.html

我有点复杂，因为我正在加载在脚本启动之前需要加载的5个文件。因此，如果您对此有任何错误，请告诉我，我可以更新我的答案

Webcomponents-lite.min.js无序加载

1 个答案: