我该如何让HTML5导入在Firefox和IE11上正常工作

问题描述：

我正在使用HTML导入等Web平台的某些功能。我该如何让HTML5导入在Firefox和IE11上正常工作

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

但是我已经被要求在IE-11上为我的部分用户部署我的web应用程序。在这里开始痛苦。正如几篇文章，人们可以找到互联网上的建议，我叫我的index.html的头，这是“进口商”文件webcomponents polyfills：

<meta http-equiv="X-UA-Compatible" content="IE=Edge;FF=3;OtherUA=4" />

：

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>

在头本身

而且

代码实例链接选择，基于应用状态动态内容：

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装载，当我在控制台中看到threee错误信息：

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

有趣的是，填充工具的作品，因为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包装。谢谢。

尝试一些检测：http://www.html5rocks.com/en/tutorials/webcomponents/imports/ - 当前支持：http://caniuse.com/#feat=imports – mplungjan

如果你设法破解这个让我知道。几个月前，我花了很多时间去研究它。只有'解决方案'是无条件加载webcomponents polyfill（在它的index.html头部放置一个脚本标记）。 –

@JaredSmith我疯了：已经无条件地打电话给polyfills。加载是成功的，但失败在追加值。在FF中也是一样。 – datelligence

答

你的问题是你正试图访问一个属性之前，它的定义。

var content = view.import;

导入属性将为空，直到webcomponents填充遍历DOM并升级链接标记为止。你需要用在处理程序，像这样：

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财产。

好的@JaredSmith，据我所知，所以我必须在'WebComponentsReady'事件触发的时刻附加响应或Promise，然后进程启动？或者有没有办法触发onload页面？ – datelligence

大合作@JaredSmith。 Yeesss！ – datelligence

@datelligence没问题。现在，如果我只能获得动态创建的导入以确定性顺序加载... –

我该如何让HTML5导入在Firefox和IE11上正常工作

相关推荐