您好，我在 Chrome 和 Opera 上有一个可用的 Polymer 1.0 网页。现在我需要该页面在 Firefox 和 Safari 中运行。我有以下测试:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<dom-module id="test-element">
<template >
<h1>It works</h1>
</template>
<script>
Polymer({
is: "test-element"
});
</script>
</dom-module>
</head>
<body unresolved>
<test-element></test-element>
</body>
</html>
我尝试过改变
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
到
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
或
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>
我认为 webcomponents 的 Polyfills 会处理 html 导入。但它不起作用。在 Firefox 中，我收到以下错误:
ReferenceError: Polymer is not defined
我无法使用 Safari 对其进行测试，但我希望得到类似的结果。
我做错了吗？我怎样才能做到这一点？
我还尝试删除 web 组件并运行 bower update 以再次安装它们。
谢谢
编辑:
我有两个文件。 index.html:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<?= $this->element('Polymer/test-element');?>
</head>
<body unresolved>
<test-element></test-element>
</body>
</html>
和元素文件:
<dom-module id="test-element">
<template >
<h1>It works</h1>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: "test-element"
});
});
</script>
</dom-module>
这很好用。我的问题是如果我删除 addEventListener。 Firefox 出现同样的错误:
ReferenceError: Polymer is not defined
好像 Polyfill 没有及时加载。有没有办法来解决这个问题？添加 addEventListener 是否正确？
谢谢
最佳答案
尝试将您的 javascript 包装在 addEventListener('WebComponentsReady', function() {}) 下。
addEventListener('WebComponentsReady', function() {
Polymer({
is: "test-element"
});
})
这将确保为不支持它的浏览器完成 webcomponents polyfill。如果元素是使用 html import 导入的，则不需要事件监听器。请引用 https://github.com/webcomponents/webcomponentsjs#webcomponentsready了解更多详情。
对修改的回应: 在您的测试元素文件中导入 polymer.html 并从您的 index.html 文件中“删除”它。最好的方法是定义一个 elements.html 文件，将所有元素(包括 test-element)导入到 elements.html 文件中，然后将 elements.html 文件导入到 index.html 文件中。同样在每个元素文件(如 test-element.html)中，确保导入所有依赖项。我建议你从 polymer 入门套件开始
关于firefox - Firefox ReferenceError : Polymer is not defined 上的 polymer 1.0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33265769/