Question

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

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

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

<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。但是，在获取＆＃34;导入＆＃34;的内容时会出现问题。档案：

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并升级链接标记之前，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.
});

Docs关于.import属性。

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

1 个答案: