如何在Firefox和IE11上使HTML5导入正常工作

Question

我正在使用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 = content.querySelector('.view');
div.appendChild(el.cloneNode(true));

有趣的是polyfill工作,因为打印onload消息而不是onerror.但是,在获取"导入"文件的内容时会出现问题:

var el = content.querySelector('.view');

顺便说一下,开头有以下代码:

<div class="view" >
<script >
 document._currentScript = document._currentScript ||   document.currentScript;
 var importDoc = document.currentScript.ownerDocument;
 var mainDoc = document;

正如我之前所说,这适用于Chrome.问题出在IE-11甚至Firefox 47上.即使在FF中,我也将dom.webcomponents.enabled设置为true.

为了使IE5导入在IE-11和FF-47上正常工作,可以改进什么.

请注意,用户需要IE-11,Edge不可能.感谢您对vanillajs的回答.我没有使用jquery或任何js包装器.谢谢.

Answer 1

您的问题是您试图在定义属性之前访问该属性。

var content = view.import;

在 webcomponents polyfill 遍历 DOM 并升级 link 标签之前，import 属性将为 null。您需要将其包装在处理程序中，如下所示：

document.addEventListener('WebComponentsReady', function(e) {
  var div = document.getElementById('vista');
  var view = document.querySelector('link[rel="import"]');
  var content = view.import;
  var el = content.querySelector('.view'); // should be good now.
});

有关财产的文件.import。