Question

为什么此代码适用于Chrome但不适用于Safari？错误：ReferenceError：无法找到变量：Polymer

Mac OSX 10.11.6。

代码：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="/node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
  <link rel="import" href="/node_modules/Polymer/polymer.html">
</head>
<body>
  <dom-module id="my-test">
    <template>
        Hello !
    </template>
  </dom-module>

  <script>
  Polymer({
      is: 'my-test'
    });
  </script>

  <my-test>
  </my-test>
</body>
</html>

Answer 1

这是因为Chrome <link rel="import">是同步处理的，而在Safari中则首先无法识别（因为未在本地实现）。因此，解析时未定义Polymer()。

在调用Polymer（）之前，您应该等待HTMLImportsLoaded事件。

<script>
    document.addEventListener( "HTMLImportsLoaded", function () {
        Polymer({
            is: 'my-test'
        });
    })
</script>

您也可以使用Polymer documentation中解释的HTMLImports.whenReady()。

<script>
    HTMLImports.whenReady( function () {
        Polymer({
            is: 'my-test'
        });
    })
</script>

简单的聚合物组件在Safari 10上不起作用

1 个答案: