聚合物准备在IE11上启动，但在Firefox或Chrome上不启动

Polymer-ready fires on IE11 but not on Firefox or Chrome

本文关键字：启动 Firefox Chrome 但在 IE11 聚合物      更新时间：2023-09-26

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

我有两页聚合物。两者在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，但只有第一个发射准备好的聚合物。有什么想法吗？

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

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

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

相关文章：