導入HTML代碼插入其他的文件

我只是一個項目今天的工作，並注意到我複製和粘貼的內容很多，當它來到在導航部分的工作，我想知道如果有導入的方式html剪切成不同的html文件，所以我不必保持複製和粘貼。我試圖通過使用「鏈接」標籤來解決這個問題。這是設置是這樣的：導入HTML代碼插入其他的文件

的index.html

<div> <link rel="import" href="nav.html"> </div>

nav.html

<a class="nav-link" href="reviews.html">Reviews</a> 
<a class="nav-link" href="trending">Trending</a> 
<a class="nav-link" href="contact">Contact</a> 
<a class="nav-link" href="about">About</a> 
<a class="nav-link" href="blog">Blog</a>

然而，我注意到，這是行不通的，而我不能讓nav.html內容導入到index.html文件中。所以，而不是這個，我不得不繼續複製和粘貼。

請讓我知道，如果你有一個解決的辦法。提前致謝！

來源

2015-04-03 Greg Development

也許'iframe'？但我推薦一個服務器端解決方案。 – Oriol 2015-04-03 21:33:58

什麼瀏覽器？你確定該瀏覽器的版本是否支持HTML導入？你的JS控制檯中有任何錯誤？ – 2015-04-03 21:35:10

我想iFrame會創建一個延遲，因爲它沒有直接從另一個文件上傳到網站的代碼，但感謝您的建議！ – 2015-04-03 23:54:21

假設你有沒有服務器應用程序的工作，你可以用一些簡單的AJAX做到這一點 - 它會採取額外的分裂秒的導航出現，但它會做的伎倆。

如果你有jQuery的，它看起來是這樣的：

每一頁將有：

<div id="navigation"></div>

你可以有一個共享的JavaScript文件如下（假設所有頁面都在同一級別的導航頁）：

jQuery(document).ready(function() { 
    jQuery.ajax({ 
     url: "nav.html" 
     ,dataType: "html" 
    }).done(function(result) { 
     jQuery("#navigation").html(result); 
    }); 
});

來源

2015-04-03 21:35:05

爲什麼不只是$（'#navigation'）.load（url）'。 – Danijel 2015-04-03 21:38:32

@Danijel沒有真正的理由 - 我個人幾乎總是滿'ajax'語法，所以我沒有記住各種快捷方式或他們的簽名，但簡單的東西就是這樣，你可能會更好。 – 2015-04-03 21:41:54

我最初創建這個項目的升級，從我的舊網站的原因之一是要加載速度更快，所以儘管它不會是一個明顯的區別真的，我想我會避免阿賈克斯儘可能。但是，謝謝你的幫助。我想我只能在html中使用一個簡單的鏈接標籤，但我猜它比我想象的要困難。 – 2015-04-03 23:58:54

-1

我不是很清楚......但你可以叫你的菜單將被添加到任何網頁從您的JavaScript文件是這樣的：

function AddTheMenu(){ 
document.body.insertAdjacentHTML('afterEnd', 
'<a class="nav-link" href="reviews.html">Reviews</a>'+ 
'<a class="nav-link" href="trending">Trending</a>'+ 
'<a class="nav-link" href="contact">Contact</a>'+ 
'<a class="nav-link" href="about">About</a>'+ 
'<a class="nav-link" href="blog">Blog</a>'); 
}

因此需要包括該菜單的每個頁面只是調用此：

AddTheMenu();

來源

2015-04-03 21:40:14 user4723924

哦，我明白了。那麼你是說用這個函數創建一個JS文件，然後使用鏈接標籤將它導入到每個html頁面中，然後調用函數？這似乎是最簡單的事情，感謝這個想法！正確！ – 2015-04-04 00:00:29

我用我們的網頁應用程序頁面填充了大量對所有人都通用的元素，這樣就像魅力一樣。 – user4723924 2015-04-04 01:19:59

您是否注意到在使用此方法或不使用此方法時存在任何滯後性，因爲它仍位於網站本身內而不像ajax？ – 2015-04-04 05:46:27

導入HTML代碼插入其他的文件

回答

相關問題