Question

我制作了一个聚合物网络应用程序，现在我试图让它在Firefox和除Chrome之外的其他浏览器中运行。据我所知，导入webcomponents的当前情况应该足够了：

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

但Firefox只是显示一个空白页面。我错过了什么？

https://www.polymer-project.org/1.0/docs/browsers建议使用以下代码：

(function() {
  if ('registerElement' in document
      && 'import' in document.createElement('link')
      && 'content' in document.createElement('template')) {
    // platform is good!
  } else {
    // polyfill the platform!
    var e = document.createElement('script');
    e.src = '/bower_components/webcomponentsjs/webcomponentslite.min.js';
    document.body.appendChild(e);
  }
})();

但我不知道在哪里使用它？ <head>和<body>似乎都不起作用...... :(

为任何帮助感到高兴！

尝试使用以下代码段替换上面的代码段，但遗憾的是没有成功：

<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 = true;
      script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
      script.onload = onload;
      document.head.appendChild(script);
    } else {
      onload();
    }
  })();
</script>

这是我的完整index.html：

<!doctype html>

<html>
  <head>

    <title>unibz.club</title>
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <!--icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#017ae4">
    <meta name="theme-color" content="#ffffff">

    <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 = true;
          script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

    <script src="bower_components/web-animations-js/web-animations.min.js"></script>    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <link rel="import" href="bower_components/platinum-sw/platinum-sw-elements.html">
    <link rel="import" href="bower_components/polymerfire/firebase-app.html">
    <link rel="import" href="src/my-app/my-app.html">
    <style type="text/css">

      my-app {
        width: 100%;
        min-width: 360px;
        height: 100%;
        overflow:auto;
      }

    </style>
    <script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "apikey",
        authDomain: "authurl",
        databaseURL: "dataurl",
        storageBucket: "bucketurl",
        messagingSenderId: "messId"
      };
      firebase.initializeApp(config);
    </script>

  </head>
  <body>
    <template is="dom-bind" id="app">
      <platinum-sw-register
          auto-register
          skip-waiting
          clients-claim
          reload-on-install
          href="sw-import.js">
        <platinum-sw-cache
            default-cache-strategy="networkFirst">
        </platinum-sw-cache>
      </platinum-sw-register>

      <my-app></my-app>
    </template>
  </body>
</html>

Answer 1

请查看polymer starter kit，index.html文件中的内容显示了如何实现此功能以便以良好的方式加载webcomponents-lite。

将Polymer支持添加到其他浏览器

1 个答案: