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

Question

我正在使用 Web 平台的某些功能，例如 HTML 导入。

在 Chrome 52 上，一切正常，正如预期的那样。我知道 HTML 在 IE11 和 FF 47 上导入有问题。

但是我被要求为某些用户在 IE-11 上部署我的网络应用程序。痛苦从这里开始。正如在互联网上可以找到的几篇文章所建议的那样，我在 index.html 的头部调用了 webcomponents polyfills，即 "importer" 文件：

<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" />

实例化 link 选择器的代码，包含基于应用状态的动态内容：

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。但是，在获取 "imported" 文件的内容时出现问题：

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 为真。

为了使 HTML5 导入在 IE-11 和 FF-47 上正常工作，可以改进什么。

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

Answer 1

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

var content = view.import;

在 webcomponents polyfill 遍历 DOM 并升级 link 标签之前，导入属性将为空。您需要像这样将其包装在处理程序中：

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.
});

Docs 关于 .import 属性.

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

How can I make HTML5 imports work properly on Firefox and IE11

html

javascript

web-platforms

polyfills

html5-import