在Firefox上的聚合物1.0 ReferenceError：聚合物没有定义 [英] Polymer 1.0 on firefox ReferenceError: Polymer is not defined
问题描述
<！DOCTYPE html>
< html>
< head>
<？php use Cake \Routing\Router; ？>
<？php echo $ this-> Html-> script（'/ bower_components / webcomponentsjs / webcomponents-lite.min.js'）; ？>
< link rel =importhref =<？= Router :: url（'/'）;？> bower_components / polymer / polymer.html>
< dom-module id =test-element>
< template>
< h1>有效< / h1>
< / template>
< script>
聚合物（{
是：test-element
}）;
< / script>
< / dom-module>
< / head>
< body unresolved>
< test-element>< / test-element>
< / body>
< / html>
我已经尝试过更改
pre （< ？>
到
<？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中，我得到了以下错误：
pre $ $ $ $ $ $ Reference $ / pre>
我一直无法使用Safari进行测试，但我期望得到类似的结果。
我做错了什么？
我也尝试删除webcomponents并运行bower update来重新安装它们。
p>谢谢
编辑：
我有两个文件。 index.html：
<！DOCTYPE html>
< html>
< head>
<？php use Cake \Routing\Router; ？>
<？php echo $ this-> Html-> script（'/ bower_components / webcomponentsjs / webcomponents.js'）; ？>
< link rel =importhref =<？= 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>有效< / h1>
< / template>
< script>
addEventListener（'WebComponentsReady'，function（）{
聚合物（{
是：test-element
}）;
}）;
< / script>
< / dom-module>
这工作正常。我的问题是如果我删除addEventListener。 Firefox获得相同的错误：
ReferenceError：Polymer未定义
好像Polyfills没有及时加载。有没有办法来解决这个问题？添加addEventListener的正确方法吗？
$ b
谢谢
尝试在addEventListener（'WebComponentsReady'，function（）{}）下包装你的javascript。
addEventListener（'WebComponentsReady'，function（）{
Polymer（{
is：test-元素
）;
}）
这将确保webcomponents填充已完成不支持它的浏览器。如果使用html导入导入元素，则不需要事件侦听器。请参阅 https://github.com/webcomponents/webcomponentsjs#webcomponents 以了解更多详情。
响应您的测试元素文件中的编辑
import polymer.html，并将其从index.html文件中删除。最好的方法是定义一个elements.html文件，将所有元素（包括test-element）导入到你的elements.html文件中，并将elements.html文件导入到你的index.html文件中。同样在你的每个元素文件（如test-element.html）中，确保你导入了所有的依赖关系。我建议你从聚合物开始套件开始
Hello I have a working Polymer 1.0 web page on Chrome and Opera. Now I need the page to run in Firefox and Safari. I have the following test:
<!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>
I have tried changing
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
to
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
or
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>
I thought the Polyfills of webcomponents would take care of the html import. But it's not working. In firefox I get the following error:
ReferenceError: Polymer is not defined
I haven't been able to test it with Safari but I expect a similar result.
Am I doing anything wrong? how can I make this work?
Also I tried deleting the webcomponents and runing bower update to install them again.
thank you
EDIT:
I have two files. 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>
and the element file:
<dom-module id="test-element">
<template >
<h1>It works</h1>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: "test-element"
});
});
</script>
</dom-module>
This works fine. My problem is if I delete the addEventListener. The Firefox gets the same error:
ReferenceError: Polymer is not defined
As if Polyfills were not loaded in time. Is there a way to fix this? Is adding the addEventListener the right way to do it?
Thank you
Try wrapping your javascript under addEventListener('WebComponentsReady', function() {}).
addEventListener('WebComponentsReady', function() {
Polymer({
is: "test-element"
});
})
This will ensure the webcomponents polyfill is completed for browsers that do not support it. If the element is imported using html import then the event listener is not required. Please refer to https://github.com/webcomponents/webcomponentsjs#webcomponentsready for more details.
Response for the edit: import polymer.html in your test-element file and 'remove' it from your index.html file. The best approach is to define an elements.html file, import all your elements (including test-element) into your elements.html file and import elements.html file into your index.html file. Also in each of your elements file (like test-element.html) make sure you import all the dependencies. I would suggest you to start with polymer-starter-kit
这篇关于在Firefox上的聚合物1.0 ReferenceError：聚合物没有定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
