6

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

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

但是，我被要求为某些用户在 IE-11 上部署我的 Web 应用程序。痛苦从这里开始。正如在互联网上可以找到的几篇文章所建议的那样，我在 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" />

使用基于应用状态的动态内容来实例化链接选择器的代码：

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。

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

请注意，用户需要 IE-11，Edge 是不可能的。我很欣赏你关于 vanillajs 的回答。我没有使用 jquery 或任何 js 包装器。谢谢。

4

1 回答 1

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

有关.import财产的文件。

于 2016-08-04T21:11:47.110 回答