Как я могу заставить импорт HTML5 работать должным образом в Firefox и IE11

Question

Я использую некоторые функции веб-платформы, такие как импорт HTML.

На Chrome 52 все работает нормально, как и ожидалось. Я знаю, что есть проблемы с импортом HTML на IE11 и FF 47.

Однако мне было предложено развернуть мое веб-приложение на IE-11 для некоторых пользователей. И тут начинается боль. Как следует из нескольких статей, которые можно найти в интернете, я назвал webfomponents polyfills в заголовке моего index.html, который является файлом "import":

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

Самое смешное, что полизаполнение работает, потому что вместо onerror печатается сообщение onload. Однако при получении содержимого "импортированного" файла возникает проблема:

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-оболочку. Благодарю.

Answer 1

Ваша проблема в том, что вы пытаетесь получить доступ к свойству до его определения.

var content = view.import;

Свойство import будет иметь нулевое значение, пока полифилл веб-компонентов не пройдет 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.
});

Документы относительно .import имущество.