我正在使用Web平台的一些功能,例如HTML Imports.
在Chrome 52上,一切正常,正如预期的那样.我知道IE11和FF 47上的HTML Imports存在问题.
但是我被要求在IE-11上为某些用户部署我的网络应用程序.这里开始痛苦.正如可以在互联网上找到的一些文章所建议的那样,我在我的index.html的头部调用了webcomponents polyfills,这是"导入器"文件:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
也在头部本身:
<meta http-equiv="X-UA-Compatible" content="IE=Edge;FF=3;OtherUA=4" />
用于实例化链接选择器的代码,其动态内容基于app状态:
var link = document.createElement('link');
link.rel = 'import';
link.href=ubicacion;
link.onload = function(e) {console.log('Loaded import: ' + e.target.href);};
link.onerror = function(e) {'Error loading import: ' + e.target.href};
document.head.appendChild(link);
在IE-11上加载时,我在控制台中收到三条错误消息:
Loaded Import: https://www.example.com/import.html
SCRIPT5007: Can't get 'querySelector' property of null reference or undefined.
Can't set property 'innerHTML' of reference null or undefined.
在index.html文件的末尾,我输入以下代码:
var div = document.getElementById('vista');
var view = document.querySelector('link[rel="import"]');
var content = view.import;
var el …我正在研究构建香草网络组件.我以前使用过Polymer,你可以将模板,样式和JavaScript放在一个文件中.如果可能的话,我希望用'vanilla'网页组件实现这一目标,但无法解决问题.我从这里获取代码并将其添加到我正在使用的文件中,如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Component test</title>
<link rel="import" href="x-foo-from-template.html">
</head>
<body>
<x-foo-from-template></x-foo-from-template>
</body>
</html>
这失败了,因为当我们尝试选择模板时它不存在,因为此时模板不在DOM中(对吗？).
有没有办法实现这个目标？我个人更喜欢这种方法在JavaScript中使用创建HTML document.createElement.
javascript web-component html5-template custom-element html5-import