得到錯誤link.import是在Firefox空

<link rel="import" href="header.html"> 
 
<link rel="import" href="footer.html"> 
 

 
<script> 
 
      var link = document.querySelector('link[href*="header"]'); 
 
      var template = link.import.querySelector('template'); 
 
      var clone = document.importNode(template.content, true); 
 
      document.querySelector('#nav').appendChild(clone); 
 
</script> 
 
<script> 
 
      var link = document.querySelector('link[href*="footer"]'); 
 
      var template = link.import.querySelector('template'); 
 
      var clone = document.importNode(template.content, true); 
 
      document.querySelector('.footer').appendChild(clone); 
 
</script>

我saprated頁眉和頁腳，和我在所有頁面調用，我使用HTML5，但頁眉和頁腳中只有谷歌Chrome瀏覽器，火狐所示Safari瀏覽器不顯示頁眉和頁腳，並提供類似錯誤的錯誤：link.import爲空

來源

2017-02-13 Hiren Patel

除Chrome之外沒有其他瀏覽器已發貨<link rel=import> HTML導入支持。 Firefox不支持HTML進口unless you enable the dom.webcomponents.enabled flag：

Firefox will not ship HTML Imports. See this Hacks blog post for more information. You can still use HTML Imports in Firefox by enabling the dom.webcomponents.enabled flag. If you don't want to enable the flag, you can use a polyfill such as Google's webcomponents.js.

目前HTML Imports spec基本上是死在這一點上，由於2016年2月在剛工作草案狀態停滯不前，而不會沿着W3C標準化的軌道進一步推動所有。

所以沒有其他瀏覽器會實現這個舊的HTML Imports規範。相反在某些時候，將會開發一個新的規格 - 一個掛鉤到ES6 Modules和<script type=module> 「module scripts」 as now defined in the HTML spec的基礎機器。

來源

2017-02-13 10:38:00 sideshowbarker

Chrome ...和它的表兄歌劇和Ionic /科爾多瓦 – Supersharp

是的，是的 - 謝謝你指出。我想我應該只是「基於閃爍的瀏覽器」... – sideshowbarker

我會建議使用文件HTML-imports.min.js從HTML Imports polyfill毋寧說是不是在用戶的瀏覽器中啓用，其實施已過期（和Firefox的標誌可能會導致與其他polyfills conficts自定義元素或陰影DOM）。

此外，使用polyfill時，請記住HTML導入將始終爲async，因此在使用link.import屬性的內容之前，您必須等待HTMLImportsLoaded事件。

<script src="html-imports.min.js"></script> 
<link rel="import" href="header.html"> 
<link rel="import" href="footer.html"> 

<script> 
    document.addEventListener('HTMLImportsLoaded', function() 
    { 
     var link = document.querySelector('link[href*="header"]'); 
     var template = link.import.querySelector('template'); 
     var clone = document.importNode(template.content, true); 
     document.querySelector('#nav').appendChild(clone); 

     link = document.querySelector('link[href*="footer"]'); 
     template = link.import.querySelector('template'); 
     clone = document.importNode(template.content, true); 
     document.querySelector('.footer').appendChild(clone); 
    }) 
</script>

來源

2017-02-14 08:36:10 Supersharp

得到錯誤link.import是在Firefox空

回答

相關問題