W jaki sposób sprawić, aby importowanie HTML5 działało poprawnie w Firefoksie i IE11

Question

Używam niektórych funkcji platformy WWW, takich jak import HTML.

W Chrome 52 wszystko działa poprawnie, zgodnie z oczekiwaniami. Wiem, że są problemy z importem HTML na IE11 i FF 47.

Zostałem jednak poproszony o wdrożenie mojej aplikacji internetowej na IE-11 dla niektórych użytkowników. I tu zaczyna się ból. Jak sugeruje kilku artykułów można znaleźć w internecie, zadzwoniłam webcomponents polyfills w głowie mojego index.html, który jest „importer” file:

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

Również w samej głowicy:

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

Kod instancję selektora łącza, z dynamicznej zawartości w oparciu o stan aplikacji:

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

I podczas ładowania na IE-11 mam threee komunikaty o błędach w konsoli:

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. 

Na końcu pliku index.html, umieścić następujący kod:

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

Najśmieszniejsze jest to, że prace PolyFill, ponieważ wiadomość onload jest drukowany zamiast onError. Jednakże istnieje problem podczas pobierania zawartości z „importowanej” file:

var el = content.querySelector('.view'); 

Który nawiasem mówiąc ma następujący kod na początku:

<div class="view" > 
<script > 
document._currentScript = document._currentScript || document.currentScript; 
var importDoc = document.currentScript.ownerDocument; 
var mainDoc = document; 

Jak stwierdzono wcześniej, to działa prawidłowo w Chrome. Problem dotyczy IE-11, a nawet Firefoksa 47. Nawet w FF włączam dom.webcomponents.enabled na true.

Co można poprawić, aby importowanie HTML5 działało poprawnie na IE-11 i FF-47.

Należy pamiętać, że użytkownicy wymagają IE-11, Edge nie ma takiej możliwości. Doceniam twoje odpowiedzi dotyczące wanillajs. Nie używam jquery ani żadnego jspera. Dzięki.

Answer 1

Problem polega na tym, że próbujesz uzyskać dostęp do właściwości przed jej zdefiniowaniem.

var content = view.import; 

Właściwość import będzie pusta, dopóki elementy polyfill nie przetną elementu DOM i nie zaktualizują znacznika łącza. Trzeba owinąć że w przewodnika tak:

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 dotyczące nieruchomości .import.