Làm cách nào tôi có thể thực hiện nhập HTML5 hoạt động bình thường trên Firefox và IE11

Question

Tôi đang sử dụng một số tính năng của Nền tảng web như Nhập HTML.

Trên Chrome 52, mọi thứ hoạt động tốt, như mong đợi. Tôi biết rằng có vấn đề với Nhập HTML trên IE11 và FF 47.

Tuy nhiên, tôi đã được yêu cầu triển khai ứng dụng web trên IE-11 cho một số người dùng. Và ở đây bắt đầu đau. Theo đề nghị của ít những điều người ta có thể tìm thấy trên internet, tôi gọi webcomponents polyfills vào đầu của index.html của tôi, đó là "nhập khẩu" file:

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

Cũng trong đầu mình:

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

mã này để nhanh chóng chọn liên kết, với nội dung động dựa trên tình trạng ứng dụng:

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

Và khi tải về IE-11 tôi nhận được threee thông báo lỗi trong giao diện điều khiển:

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. 

Vào cuối của file index.html, tôi đặt đoạn mã sau:

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

Điều buồn cười là các công trình polyfill, bởi vì thông điệp onload được in thay vì onerror. Tuy nhiên có một vấn đề khi nhận được nội dung của tập tin "nhập khẩu":

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

nào bằng cách này có đoạn mã sau vào đầu:

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

Như tôi đã nói trước đây, điều này hoạt động tốt trên Chrome. Vấn đề là trên IE-11 và thậm chí trên Firefox 47. Ngay cả trong FF tôi đã kích hoạt dom.webcomponents.enabled thành true.

Điều gì có thể được cải thiện để làm cho việc nhập HTML5 hoạt động tốt trên IE-11 và FF-47.

Xin lưu ý rằng người dùng yêu cầu IE-11, Edge không phải là một khả năng. Tôi đánh giá cao các câu trả lời của bạn liên quan đến vanillajs. Tôi không sử dụng jquery hoặc bất kỳ wrapper js. Cảm ơn.

Answer 1

Sự cố của bạn là bạn đang cố gắng truy cập thuộc tính trước khi được xác định.

var content = view.import; 

Thuộc tính nhập sẽ không có giá trị cho đến khi các thành phần web polyfill đi qua DOM và nâng cấp thẻ liên kết. Bạn cần phải bọc trong một handler như vậy:

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 về .import tài sản.