我遇到了一个意想不到的问题。
我有两页 polymer 。两者在 IE11 上都工作得很好，完全没有问题(除了性能较慢)。 现在，在 Firefox 和 Chrome 上，其中一个不工作，从不触发 polymer-ready，另一个工作正常。 如果有的话，人们会认为 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，但只有第一个触发 polymer-ready。有什么想法吗？
最佳答案
webcomponents.js 应该在导入 html 之前加载。尝试将该脚本标记移动到所有导入之上(另请参阅 https://www.polymer-project.org/docs/start/creatingelements.html )。应该就这些了。</p>
我想我可以解释这种奇怪的行为。也许在导入文件的第一个示例中没有 Polymer 特定的功能，而在第二个示例中有(注意 Polymer != web components.webcomponents.js 包含 Polymer 特定的功能)。因为 IE11 本身不支持 Web 组件，它会跳过 html 导入标签(它不知道它们)，Polymer 的 polyfill 然后在加载 webcomponents.js 后扫描文档并加载它们(因为这是 polyfill 中的一个函数) .
因为 Chrome 和 FF 确实支持 Web 组件，所以它们在 webcomponents.js 和 Polymer 函数尚未加载之前“看到”html 导入。因此它不起作用。
关于javascript - Polymer-ready 在 IE11 上触发，但在 Firefox 或 Chrome 上不触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28827217/