Polymer-ready 会在 IE11 上触发，但不会在 Firefox 或 Chrome 上触发答案

【问题标题】：Polymer-ready fires on IE11 but not on Firefox or ChromePolymer-ready 会在 IE11 上触发，但不会在 Firefox 或 Chrome 上触发
【发布时间】：2015-03-03 08:32:15
【问题描述】：

我遇到了一个意想不到的问题。

我有两页聚合物。两者都可以在 IE11 上正常工作，完全没有问题（除了性能缓慢）。现在，在 Firefox 和 Chrome 上，其中一个不工作，永远不会触发聚合物就绪，另一个工作正常。如果有的话，人们会认为 IE 会遇到麻烦。

与这种非触发行为相关，此页面在 FF 或 Chrome 上显示的唯一聚合物元素是主工具栏，以及其中的东西，仅此而已。我只是不知道下一步该尝试什么。

这是标题。第一个来自在任何地方都可以使用的页面，没有问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
    <title>N-Adviser</title>
    [... a bunch of element imports ...]
    <script src="components/webcomponentsjs/webcomponents.js"></script>
    <style shim-shadowdom>
        [...some styling...]
    </style>
    <script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
</head>

这是一个坏的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="headPortal" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
    <title>Portal</title>
    <link rel="import" href="components/font-roboto/roboto.html" />
    <link rel="import" href="components/polymer/polymer.html" />
    [...a bunch of element imports...]
    <link type="text/css" rel="stylesheet" href="Styles/LoginStyle.css" shim-shadowdom />
    <script src="components/webcomponentsjs/webcomponents.js"></script>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
</head>

看不到任何差异，除了其中一个从外部文件导入其 CSS，这无关紧要。

在所有的 html 之后，他们都有自己的 javascript 代码

<script type="text/javascript">
    $(document).ready(function () {
        alert("docready");
    });
    window.addEventListener('polymer-ready', function (e) {
        alert("polready");
    [...]
</script>

两者都触发document.ready，但只有第一个触发聚合物就绪。有什么想法吗？

【问题讨论】：

标签： javascript import polymer

【解决方案1】：

webcomponents.js 应该在 html 导入之前加载。尝试将该脚本标签移到所有导入之上（另请参阅https://www.polymer-project.org/docs/start/creatingelements.html）。应该就是这些了。

我想我可以解释这种奇怪的行为。可能在导入文件的第一个示例中没有 Polymer 特定功能，而在第二个示例中则有（注意 Polymer != web components.webcomponents.js 包含 Polymer 特定功能）。因为 IE11 本身不支持 web 组件，所以它会跳过 html 导入标签（它不知道它们），然后 Polymer 的 polyfill 在加载 webcomponents.js 后扫描文档并加载它们（因为这是 polyfill 中的一个函数） .

因为 Chrome 和 FF 确实支持 web 组件，所以它们在 webcomponents.js 和 Polymer 函数尚未加载之前“看到”了 html 导入。因此它不起作用。

【讨论】：

我以为我已经对导入的每个订单进行了测试，但再次尝试更改 webcomponents.js。仍然没有工作，聚合物准备好没有触发：/另外，我没有在我的问题上说出来，但是正在工作的页面比另一个页面复杂得多，并且导入了“坏”页面所做的所有事情，加上许多其他人。我会记住你的解释，因为它很有用，但在这种情况下就不行了。
对不起，我的意思是你的解释很有道理，仍然不能解决问题