Question

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

我有两页聚合物。两者在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，但只有第一个点燃聚合物就绪。有什么想法吗？

Answer 1

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

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

由于Chrome和FF确实有网络组件支持，因此他们会看到＆＃39; webcomponents.js和Polymer函数之前的html导入尚未加载。因此它不起作用。

在IE11上激活聚合物，但在Firefox或Chrome上没有

1 个答案: