首页 文章

firefox上的Polymer 1.0 ReferenceError：未定义Polymer

提问于
浏览 次
3

您好我在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的Polyfill会处理html导入 . 但它不起作用 . 在Firefox中我收到以下错误：

ReferenceError: Polymer is not defined

我无法用Safari测试它，但我期望得到类似的结果 .

我做错了吗？我该怎么做才能做到这一点？

此外，我尝试删除webcomponents并运行bower更新再次安装它们 .

谢谢

编辑：

我有两个文件 . 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

好像Polyfills没有及时加载 . 有没有办法来解决这个问题？添加addEventListener是否正确的方法呢？

谢谢

firefox polymer web-component polyfills html-imports

1 回答

  • 10

    尝试在addEventListener（'WebComponentsReady'，function（）{}）下包装你的javascript .

    addEventListener('WebComponentsReady', function() {
            Polymer({
                is: "test-element"
            });
})

    这将确保为不支持它的浏览器完成webcomponents polyfill . 如果使用html import导入元素，则不需要事件侦听器 . 有关详细信息，请参阅https://github.com/webcomponents/webcomponentsjs#webcomponentsready .

    Response for the edit: 在您的test-element文件中导入polymer.html，在index.html文件中导入'remove' . 最好的方法是定义elements.html文件，将所有元素（包括test-element）导入element.html文件，并将elements.html文件导入index.html文件 . 此外，在每个元素文件（如test-element.html）中，请确保导入所有依赖项 . 我建议你从聚合物启动器套件开始

    回复于

相关问题