我遇到了一个意外的问题。
我有两页聚合物。两者在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导入。因此,它不起作用。