我的 Polymer 网站无法在 Firefox 上运行答案

【问题标题】：my Polymer website does not work on firefox我的 Polymer 网站无法在 Firefox 上运行
【发布时间】：2014-10-24 19:55:17
【问题描述】：

页面位于http://5heurescod.tk。请检查源代码，看看我做错了什么。

它在 Chrome 上运行良好，但在 firefox 上运行良好。我忘记导入某些内容了吗？

（编辑：当我说它不起作用时，我的意思是左侧的菜单不可点击，并且没有调用应该在开始时调用的javascript函数getCard（）。）

我用过

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

有什么想法吗？谢谢！

【问题讨论】：

它适用于我，但你所说的“不起作用”是什么意思？这不是技术描述。
@Rob 我添加了详细信息，谢谢！
这里的 5heurescod.tk 页面在 Firefox 中有效，但在教程应用程序中无效：polymer-project.org/apps/polymer-tutorial/finishedFirefox 33.1。

标签： google-chrome firefox polymer

【解决方案1】：

乍一看，我会说：

确保首先加载 Web 组件 polyfill（webcomponents.js，以前称为 platform.js），肯定是在任何 HTML 导入之前，因为这包括用于 HTML 导入的 polyfill。
在操作任何 DOM 或设置 CoreStyle 属性之前等待polymer-ready 事件。你也许可以在 Chrome 上解决这个问题，因为原生 HTML 导入的工作方式略有不同——但绝对不能在 Firefox 或任何没有原生 HTML 导入的浏览器上。

见：https://www.polymer-project.org/0.5/docs/polymer/polymer.html#polymer-ready

【讨论】：

准确！非常感谢:)
您是否也知道为什么教程应用程序无法在 Firefox (33.1) 中运行？ polymer-project.org/apps/polymer-tutorial/finished 我尝试添加 javascript 代码以首先等待聚合物就绪事件，但没有成功。谢谢！
我正在使用 OS X 上的 Firefox 33.1 查看polymer-project.org/apps/polymer-tutorial/finished，它可以正常工作，只是在初始加载时，两个选项卡上都显示了选定的选项卡下划线。当我们更新我们的网站时，您可能会看到间歇性中断。如果您仍然遇到此问题，您使用的是什么操作系统？您看到了什么？
在撰写本文时使用了这个答案平台，但现在已经过时了（见下面的答案）所以......这个答案是错误的，正如它所说的那样。考虑修改或添加新答案

【解决方案2】：

在我的例子中，我将所有导入都放在了一个 elements.html（包括 webcomponents.js）中。我将 script 标签从 elements.html 移动到 index.html 并且它起作用了。我在导入elements.html 之前放置了脚本标签。结果 index.html 是：

<head lang="en">
<meta charset="UTF-8">    
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js">
</script>

<link rel="import" href="elements.html">
<link rel="stylesheet" href="css/core_toolbar.css">    
</head>

【讨论】：

【解决方案3】：

Firefox 不支持 html 导入，请访问 https://www.polymer-project.org/0.5/resources/compatibility.html

而我不再使用platform.js，现在你应该首先包含webcomponents.js，访问https://www.polymer-project.org/0.5/docs/start/platform.html

【讨论】：

【解决方案4】：

我在使用 Firefox 时遇到了同样的问题，我建议你使用 polyfill webcomponents-lite.js 而不是 webcomponents.js，这对智能设备有一些问题。正如 https://www.polymer-project.org/1.0/docs/browsers

中所说

我们推荐使用 webcomponents-lite.js 版本的 polyfill 使用聚合物 1.0+。此版本旨在与 Shady DOM 一起使用，并且不包含完整的 Shadow DOM polyfill。

虽然完整的 webcomponents.js polyfill 适用于 Polymer 1.0+，我们不建议使用它。此版本包含完整的影子 DOM polyfill，众所周知，它具有很高的性能开销。

您还需要注意标签 link 在您的 web 组件中不起作用，在这种情况下，只需将其移动到托管 web 组件的页面。

【讨论】：

【解决方案5】：

对我来说，我加载的是 webcomponents-lite.min.js，而不是完整版 webcomponents.min.js。

【讨论】：

【解决方案6】：

这一切都与浏览器对 Web 组件的支持有关。

如果浏览器的本机支持不适用于 Web 组件，则此 polly 填充在 "bower_components/webcomponentsjs/" 下，需要 "webcomponents.js" 或 "webcomponents-lite.js"。

见：https://www.polymer-project.org/1.0/docs/browsers

【讨论】：