在引導程序中生成HTML

我已經下載了一個網站的引導模板，並試圖瞭解它是如何工作的。目前看起來不錯，但是我下載的模板在5個主頁上有很多相同的內容，並且不是從一個地方生成或引用的。由於導航欄在所有網頁中都是相同的，我怎麼能夠在沒有服務器端的情況下引用所有頁面以包含相同的頁眉（或其他html）呢？這似乎是一個簡單的HTML或JS的解決方案，只是似乎無法找到我尋找....在引導程序中生成HTML

讓我們說這是導航欄（保存爲/component/navbar.html¿也許？）：

<div class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="index.html"> 
        <b>Your</b>Site 
       </a> 
       <div class="nav-collapse fr"> 
        <ul class="nav"> 
         <li><a href="index.html">Home</a></li> 
         <li class="active"><a href="work.html">Our work</a></li> 
         <li><a href="about.html">About us</a></li> 
         <!-- <li><a href="plans.html">Pricing</a></li> --> 
         <li><a href="explore.html">Explore</a></li> 
         <li><a href="faq.html">FAQ</a></li> 
         <li><a href="alt.html">Alt</a></li> 
         <li><a href="contact.html">Contact</a></li> 
         <li><button class="btn btn-primary">Sign In</button></li> 
        </ul> 
       </div><!--/.nav-collapse --> 
      </div><!-- end .container --> 
     </div><!-- end .navbar-inner --> 
    </div><!-- end .navbar -->

如何將頁面鏈接到這段HTML中包含？

來源

2012-11-09 chris Frisina

這不可能與HTML，你應該使用php或其他後端語言來做到這一點。 Javascript不是一種選擇，因爲你希望沒有js的人也能看到菜單。 –

如果人們沒有啓用javascript，大部分bootstrap無用 - 就像上面使用的'collapse'一樣。 – davidkonrad

一致認同，隨着JS的泛濫，我願意強迫人們使用它，尤其是考慮到網站的內容只是內容，沒有登錄，沒有安全方面，我只是想讓網站和體驗更加豐富其樂融融。 –

你可以用jQuery來做，總是出現在boostrap中。

港口內<div class="navbar">內容到一個文件，你建議叫/component/navbar.html - 這樣的HTML看起來像這樣

<div class="navbar" id="navbar"> 
</div>

在腳本中，通過AJAX

$(document).ready(function(){ 
    $.ajax({ 
     url : 'component/navbar.html', 
     success(html) { 
      $("#navbar").html(html); 
     } 
    }); 
});

從 navbar.html內容加載到 #navbar

編輯：或簡單地$("#navbar").load('component/navbar.html'); 這可能是您正在尋找的解決方案，它的行爲mor e就像一種可以放在標題中的「包含」。

來源

2012-11-09 07:32:18 davidkonrad

我不斷收到錯誤：'Access null不被Access-Control-Allow-Origin'所允許。我試着研究這個，並得到不同的方向。有任何想法嗎？ –

找到了。首先關閉所有Chrome（因爲這是主要問題），然後從終端使用這個'/ Applications/Google \ Chrome.app/Contents/MacOS/Google \ Chrome --allow-file-從文件訪問' –

它不應該是一個「運行時間」的問題。然而，我只能猜測爲什麼load（）加載的正常代碼應該是一個問題，以及爲什麼你想要它。谷歌這樣做的原因並不是它很聰明，而是它們能夠完成所有回調的唯一方式） – davidkonrad

在引導程序中生成HTML

回答

相關問題