Webcomponents-lite.min.js加載不正常

使用Firefox，需要webcomponents-lite.min.js。Webcomponents-lite.min.js加載不正常

在我的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負載webcomponents-lite.min.js之前就在Firefox中的網絡選項卡。這是導致錯誤，因爲我需要webcomponents-lite.min.js加載之前routing.js。

由於沒有aysnc行爲，應該保證順序，對不對？爲什麼會發生這種情況，我怎樣才能使這個訂單工作，而不需要用更多的事件監聽器進行重寫，以及如果這樣的話呢？

來源

2017-02-26 dman

請勿將您的routing.js作爲.js文件導入。

首先，您應該切換到routing.html並將您的路由文件轉換爲聚合物元素。我使用page.js，就像5分鐘的工作。相信我，當我的項目變得越來越大時，它會有很大的幫助。對於進口，您可以使用聚合物的功能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檔在腳本啓動之前加載。所以，如果你會得到一些錯誤，告訴我，我可以更新我的答案

來源

2017-02-27 08:48:19

Webcomponents-lite.min.js加載不正常

回答

相關問題