我遇到了一个意外的问题。

我有两页聚合物。两者在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)。那应该是全部。

我想我可以解释这种奇怪的行为。也许在导入文件的第一个示例中没有聚合物特定的功能,而在第二个示例中(注意,聚合物!= Web组件。webcomponents.js包含聚合物特定的功能)。因为IE11本身不支持Web组件,所以它会跳过html导入标签(它不知道),并且Polymer的polyfill在加载webcomponents.js并将其加载后扫描文档(因为这是polyfill中的功能) 。

因为Chrome和FF确实具有Web组件支持,所以它们在尚未加载webcomponents.js和Polymer函数之前会“查看” HTML导入。因此,它不起作用。

07-24 19:31