Fatal编程技术网
  • javascript/
  • Javascript Webcomponents-lite.min.js加载出现故障

Javascript Webcomponents-lite.min.js加载出现故障

javascript html polymer

Javascript Webcomponents-lite.min.js加载出现故障,javascript,html,polymer,polymer-1.0,Javascript,Html,Polymer,Polymer 1.0,使用需要webcomponents lite.min.js的Firefox 在我的index.html中，我有webcomponents lite.min.js，它在我的routing.js脚本之前执行和加载： <script> // Setup Polymer options window.Polymer = { dom: 'shadow', lazyRegister: true, }; // L

使用需要
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>


//设置聚合物选项
窗口聚合物={
dom:“影子”，
懒汉：没错，
};
//如果浏览器不支持本机，请加载webcomponentsjs polyfill
//Web组件
（功能（）{
"严格使用",；
var onload=函数（）{
//对于本机导入，手动激发WebComponentsReady so用户代码
//可以为本机导入和多填充导入使用相同的代码路径。
如果（！window.HTMLImports）{
document.dispatchEvent(
新的CustomEvent（'WebComponentsReady'，{bubbles:true}）
);
}
};
var webComponentsSupported=(
文档中的“registerElement”
&&document.createElement（“链接”）中的“导入”
&&document.createElement（“模板”）中的“内容”
);
如果（！WebComponents受支持）{
var script=document.createElement（'script'）；
script.async=false；
script.src='/bower_components/webcomponentsjs/webcomponents lite.min.js'；
script.onload=onload；
document.head.appendChild（脚本）；
}否则{
onload（）；
}
})();
身体{
保证金：0；
字体系列：“Roboto”，“Helvetica Neue”，Helvetica，Arial，无衬线；
线高：1.5；
最小高度：100vh；
背景色：#fafafa；
}
但是，查看firefox
routing.js
中的网络选项卡，就会在
webcomponents lite.min.js
之前加载。这导致了一个错误，因为我需要在
routing.js
之前加载
webcomponents lite.min.js

因为没有
aysnc
行为，所以应该保证订单，对吗？为什么会发生这种情况？我怎样才能在不使用更多事件侦听器和if-then语句进行过度编码的情况下使这种顺序正常工作

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

首先，您应该切换到
routing.html
，并将路由文件转换为polymer元素。我正在使用page.js，这就像是5分钟的工作。相信我，当我的项目越来越大的时候，它帮助了我很多。对于进口产品，您可以使用聚合物的功能

我也有类似的问题，所以我通过在另一个函数中导入
路由
文件来解决它，该函数在所有导入都准备就绪时调用
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>


//设置聚合物选项
窗口聚合物={
dom:“影子”，
懒汉：没错，
};
//如果浏览器不支持本机，请加载webcomponentsjs polyfill
//Web组件
（功能（）{
"严格使用",；
var onload=函数（）{
//对于本机导入，手动激发WebComponentsReady so用户代码
//可以为本机导入和多填充导入使用相同的代码路径。
如果（！window.HTMLImports）{
document.dispatchEvent(
新的CustomEvent（'WebComponentsReady'，{bubbles:true}）
);
}
};
var importLinks=函数（）{
Polymer.Base.importHref（“/elements/routing.html”，function（）{onload（）}）；
}
var webComponentsSupported=(
文档中的“registerElement”
&&document.createElement（“链接”）中的“导入”
&&document.createElement（“模板”）中的“内容”
);
如果（！WebComponents受支持）{
var script=document.createElement（'script'）；
script.async=false；
script.src='/bower_components/webcomponentsjs/webcomponents lite.min.js'；
script.onload=导入链接；
document.head.appendChild（脚本）；
}否则{
onload（）；
}
})();
身体{
保证金：0；
字体系列：“Roboto”，“Helvetica Neue”，Helvetica，Arial，无衬线；
线高：1.5；
最小高度：100vh；
背景色：#fafafa；
}
在这种情况下，不要忘记导入
polymer.html

我有一点复杂，因为我正在加载5个文件，这些文件需要在脚本启动之前加载。所以，如果你发现了一些错误，告诉我，我可以更新我的答案