Webコンポーネント-lite.min.jsが順番に読み込まれない

Firefoxを使用する場合、webcomponents-lite.min.jsが必要です。Webコンポーネント-lite.min.jsが順番に読み込まれない

私は私の routing.jsスクリプトの前に実行され、負荷 webcomponents-lite.min.js持っている私のindex.htmlで

：右webcomponents-lite.min.js前に、Firefoxの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の前にロードするにはwebcomponents-lite.min.jsが必要なので、これはエラーの原因です。

aysncの動作がないため、注文を保証する必要があります。なぜこのようなことが起きているのですか？そして、もっと多くのイベントリスナーを使ってオーバーコーディングせずにこのオーダーを動作させるにはどうしたらいいですか？

出典

2017-02-26 dman

routing.jsを.jsファイルとしてインポートしないでください。

まず、routing.htmlに切り替え、ルーティングファイルをポリマー要素に変換する必要があります。私はpage.jsを使用していて、5分の仕事のようでした。私のプロジェクトがより大きくなったとき、それは多くの助けになりました。輸入品については、ポリマーの機能importHrefを使用することができます。

私は同様の問題を抱えていたので、routingファイルをonloadという別の機能の中にインポートすることで解決しました。あなたのケースでは

：私はあることを必要としている5つのファイルをロードしていますので、この場合は

<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

をインポートすることを忘れないでくださいスクリプトが開始される前にロードされます。だから、これで何らかのエラーが出たら、教えてください。私の答えを更新できます。

出典

2017-02-27 08:48:19

Webコンポーネント-lite.min.jsが順番に読み込まれない

答えて

関連する問題